javascript - 一个js显示隐藏元素的问题

问题描述

问 题

<div>
    <ul class="list">
        <li></li>
        <li></li>
        <li class="show"></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="list">
        <li class="show"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="show"></li>
    </ul>
 </div>

 <script>
     var ul = document.querySelectorAll('ul.list');
     ul.forEach(function (value, index, array) {
            var li = value.querySelectorAll('li');
            console.log(li.length);
            for (var i = 0; i < li.length; i++) {
              if (i > 2 ) {
                li[i].style.display = 'none';
              }
            }                
          })
          
          dcoument.getElementsByClassName("show").click(function () {
              // show li
          });
 </script>

默认每个ul显示若干个li，点击show的时候全部显示
问题就是点击show的时候会影响到其它ul中的li的显示。
不能通过id去单个处理，因为内容比较多，都是从数据库里读出来的，会变。
是不是应该把 show 的 click 放到循环里面去监听？

补充： show 不一定是第一个元素……是变动的。是第一个或者最后一个都有可能……

谢谢大家抽时间来回答，目前觉得最好的方法还是找父元素再把全部子元素show()

$(".show").click(function () {
            $(this).parent().children().show();
            $(this).hide();
          });

解决方案

$(".show").on("click",function(){

 $(this).parent("list").find("li").show();

})

这篇关于javascript - 一个js显示隐藏元素的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！