0

最近碰到一个问题,将问题简化了一下写出来,希望得到大家的指点。下面是问题:
功能实现:点击一个显示的div,该div隐藏,下一个div显示;再次点击显示的div ... 依次进行。
源代码
为方便查看,下面也给出源代码:



<div> <div class = "myDiv" id = "div1">1</div> <div class = "myDiv" id = "div2">2</div> <div class = "myDiv" id = "div3">3</div> <div class = "myDiv" id = "div4">4</div> <div class = "myDiv" id = "div5">5</div> <div class = "myDiv" id = "div6">6</div> <div class = "myDiv" id = "div7">7</div> </div> css: .myDiv { display: inline-block; width: 50px; height: 20px; background-color: lightgreen; } .myDiv:not(:nth-child(1)) { visibility: hidden; } js: window.onload = function(){ var cur = 1; var curDiv = document.getElementById("div" + cur); var nextDiv = document.getElementById("div" + ++cur); curDiv.onclick = function(){ curDiv.style.visibility = "hidden"; nextDiv.style.visibility = "visible"; } }

目前的问题是只能进行第一次点击,之后就无法通过点击触发事件了。求教问题出在哪里,如何改进,或者有其他更好的方法?

hiYoHoo 2.2k
2015-05-24 提问

查看全部 4 个回答

1

以上几个答案都都是用js控制样式。(不太推荐这种做法)
其实我们只需把样式写在css文件内,用js给对应的div添加一个class即可.(个人推荐的做法)
另外并不需要给每个div都加一个id,可使用data-index代替.
方法如下:

//html


<div>
    <div class = "myDiv active" data-index="1">1</div>
    <div class = "myDiv" data-index="2">2</div>
    <div class = "myDiv" data-index="3">3</div>
    <div class = "myDiv" data-index="4">4</div>
    <div class = "myDiv" data-index="5">5</div>
    <div class = "myDiv" data-index="6">6</div>
    <div class = "myDiv" data-index="7">7</div>
</div>



//css
.myDiv {
    display: inline-block;
    width: 50px; height: 20px;
    background-color: lightgreen;
}
.myDiv{
    visibility: hidden;
}
.active{
  visibility: visible;
}

//js


<script>
$(function() {
  $(".myDiv").on('click', function() {
    event.preventDefault();
    if($(this).attr("data-index") == 7){
      $(this).removeClass("active");
      $(".myDiv").eq(0).addClass("active");
    }
    else{
      $(this).removeClass("active");
      $(this).next("div").addClass("active");
    }
  });
});
</script>


望采纳,Thx.

推荐答案

1

已采纳

下面是我根据你的需求写的一个效果(不知道是不是这样)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         * {
            margin: 0;
            padding: 0;
         }
         ul {
            list-style: none;
            padding: 20px;
         }
         .demo {
            visibility: hidden;
            width: 80px;
            margin-bottom: 15px;
            padding: 10px;
            background-color: red;
            color: blue;
         }
         .active {
            visibility: visible; 
         }
    </style>
</head>
<body>
    <ul>
        <li class="demo active">1</li>
        <li class="demo">2</li>
        <li class="demo">3</li>
        <li class="demo">4</li>
    </ul>

    <script type="text/javascript">
        var aDemo = document.querySelectorAll('.demo'),
            _now = 0;

        for (var i = 0; i < aDemo.length; i++) {
            aDemo[i].addEventListener('click', function(){
                if (_now === aDemo.length - 1) {
                    _now = 0;
                } else {
                    _now += 1;
                }

                this.className = 'demo';
                aDemo[_now].className += ' active';
            }); 
        };
    </script>
</body>
</html>

你自己的写那个问题在于只给了一个绑定了事件,所以只有点击第一个才有效果。你需要的是给所有都绑定上事件。不需要一个一个使用id来获取,可以使用getElementsByTagName来获取一个元素集合,然后用for循环来给每一个元素绑定事件!

推广链接