javascript - 如何实现div串的渐显渐隐？-PHP中文网问答

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



<p>
    <p class = "myp" id = "p1">1</p>
    <p class = "myp" id = "p2">2</p>
    <p class = "myp" id = "p3">3</p>
    <p class = "myp" id = "p4">4</p>
    <p class = "myp" id = "p5">5</p>
    <p class = "myp" id = "p6">6</p>
    <p class = "myp" id = "p7">7</p>
</p>


css:
.myp {
    display: inline-block;
    width: 50px; height: 20px;
    background-color: lightgreen;
}
.myp:not(:nth-child(1)) {
    visibility: hidden;
}


js:
window.onload = function(){
    var cur = 1;
    var curp = document.getElementById("p" + cur);
    var nextp = document.getElementById("p" + ++cur);
    curp.onclick = function(){
        curp.style.visibility = "hidden";
        nextp.style.visibility = "visible";
    }
}

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

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

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

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> </head> <body> 1 2 3 4 5 6 7 </body> </html>

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'; }); };

//html 1 2 3 4 5 6 7 //css .myp { display: inline-block; width: 50px; height: 20px; background-color: lightgreen; } .myp{ visibility: hidden; } .active{ visibility: visible; } //js <script> $(function() { $(".myp").on('click', function() { event.preventDefault(); if($(this).attr("data-index") == 7){ $(this).removeClass("active"); $(".myp").eq(0).addClass("active"); } else{ $(this).removeClass("active"); $(this).next("p").addClass("active"); } }); }); </script>

全部回复(4)

大家讲道理2017-04-10 15:17:53 4楼

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

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

赞 +0

添加回复