问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
hiYoHoo
    2.2k31118

    最近碰到一个问题，将问题简化了一下写出来，希望得到大家的指点。下面是问题：
    功能实现：点击一个显示的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 个回答
    得票最新
    头像
    _我已经从中二毕业了
      7.9k72131
      ✓ 已被采纳

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

      <!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

        楼主这段代码主要有两个错误：
        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

          改了一下上上面的答案

          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

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

            查看全部 4 个回答
            推荐问题
            宣传栏