Question

    <body>

    <div class="container">
    <h1>Write Queries</h1>
    <div id="leftdiv">
    </div>
     <div id="rightdiv">
     <h4>TABLES</h4>
     <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.each demo</title>
  <style>
  div.one {
    color: blue;
  }
  div.two {
    color: red;
    display: none;
  }
  a {
      text-decoration: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class='one'>department<br></div><div class='two'><input type='checkbox' name='results' class='right_tables'> id<br /><input type='checkbox' name='results' class='right_tables'> dept<br /><input type='checkbox' name='results' class='right_tables'> emp_id<br /></div><div class='one'>hussaib11<br></div><div class='two'><input type='checkbox' name='results' class='right_tables'> id<br /></div><div class='one'>hussaibd11<br></div><div class='two'><input type='checkbox' name='results' class='right_tables'> id<br /></div><div class='one'>company<br></div><div class='two'><input type='checkbox' name='results' class='right_tables'> id<br /><input type='checkbox' name='results' class='right_tables'> name<br /><input type='checkbox' name='results' class='right_tables'> age<br /><input type='checkbox' name='results' class='right_tables'> address<br /><input type='checkbox' name='results' class='right_tables'> salary<br /></div>

</body>
<script>
    $(document).ready(function(e) {
        $(document).on("click", '.one',function() {
            $('.two').slideDown(1000);
            });

        $(document).on("click", ".two", function(){
                $('.two').slideUp(5000);
            }); 
        });

</script>
</html>
</div>
</body>
</html>

当我点击第一类的div时，这段代码应该响应。我已经创建了一个函数，每次都会使用这个类添加一个div，所以有多个具有相同类的div，当我点击任何div时所有其他div对响应的响应，但我只想要每个当我这样做时响应点击。你怎么样的？带有.two的div隐藏着css display none。

Answer 1

您不需要通过迭代所有div来添加Click事件处理程序。只需使用.on()绑定动态创建的div的点击事件

$(document).ready(function(e) {
       $(document).on("click",'.one',function(){
            $(this).next('.two').slideDown(1000);
        });

    $(document).on("click",'.two',function(){
            $(this).slideUp(5000);
     }); 
});

Answer 2

问题不在于他们都在响应点击，而是在点击任何.two时，您将所有slideDown()元素告诉.one。您需要定位特定的.two。例如。（假设.two元素紧跟.one）

$(document).ready(function(e) {
   $('.one').click(function(){
        $(this).next().slideDown(1000);
    });

   $('.two').click(function(){
        $(this).slideUp(5000);
    }); 
});

（另外，您不需要each() - 在jQuery中，$('.one').func()通常意味着将func()应用于具有类.one的所有元素，因此我删除了{ {1}}）

JQuery与每个人混淆不适合我

2 个答案: