如何实现div串的渐显渐隐？

最近碰到一个问题，将问题简化了一下写出来，希望得到大家的指点。下面是问题：
功能实现：点击一个显示的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";
    }
}

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

javascript

阅读 7.4k

4 个回答

✓ 已被采纳

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

<!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循环来给每一个元素绑定事件！

sheilaCat

78152636

发布于
2015-05-24

更新于
2015-05-25

楼主这段代码主要有两个错误：
1、只给第一个DIV绑定了事件
解决方案：利用事件冒泡进行事件委托，给当前点击的DIV绑定事件
2、没有更新curDiv和nextDiv
一开始定义了curDiv和nextDiv后，实际上后面都没有更改这两个的值
curDiv和nextDiv一直是第一个DIV和第二个DIV，所以点击事件中进行更新

望采纳。

window.onload = function(){
    var cur = 1;
    var curDiv = document.getElementById("div" + cur);
    var nextDiv = document.getElementById("div" + ++cur);
        //利用事件委托给当前DIV设置样式
        all.onclick = function(e){
                alert(e.target.id);
                curDiv.style.visibility = "hidden";
                nextDiv.style.visibility = "visible";
              //更新curDiv和nextDiv的值
                curDiv = document.getElementById("div" + cur);
                nextDiv = document.getElementById("div" + ++cur);
            }
}

忘了说要在父DIV里写一个ID为all了……

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    </head>
    <body>
        <div id ="all">
        <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>
    </body>
</html>

rccoder

1.2k146

发布于
2015-05-24

改了一下上上面的答案

javascriptvar aDemo = document.querySelectorAll('.demo'),
            _now = 0;

        for (var i = 0; i < aDemo.length; i++) {
            aDemo[i].addEventListener('click', function(){

                            _now = (_now+=1)%(aDemo.length);

                this.className = 'demo';
                aDemo[_now].className += ' active';
            }); 
        };

Max_Chan

579138

发布于
2015-05-24

以上几个答案都都是用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.

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

如何实现div串的渐显渐隐？

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？

前端有没有办法实现页面截图？