javascript - 只修改这个类多个元素同一个类javascript jquery

Question

我有一个问题我有这个JavaScript隐藏函数元素本身在一个循环中，所以它有多个实例，我有这个代码但是当我点击切换按钮时，它会修改所有元素，而不仅仅是我点击的那个编码：

<script>
//<![CDATA[
 $(document).ready(function()
 {
   $('.aval').hide().before('');
   $('a.toggle-aval').click(function() 
       {
        $('.aval').slideToggle(1000);
        return false;
   });
 });
//]]>
</script>

有没有办法让我只影响点击的元素？

Answer 1

如果 .aval 元素在 a.toggle-aval 中，试试这个：

<script>
//<![CDATA[
 $(document).ready(function(){
   $('.aval').hide().before('');
   $('a.toggle-aval').click(function() {
        $(this).find('.aval').slideToggle(1000);
        return false;
   });
 });
//]]>
</script>

Answer 2

用于this使用被点击的元素。假设 aval 类元素是切换点击的子元素。没有html是不可能的。如果它们是基于索引的，您可以通过使用单击的元素的索引来访问它

<script>
//<![CDATA[
 $(document).ready(function(){
   $('.aval').hide().before('');
   $('a.toggle-aval').click(function() {
        $(this).find('.aval').slideToggle(1000);
        // or
        $('.aval').eq( $(this).index() ).slideToggle(1000);
        return false;
   });
 });
//]]>
</script>

Answer 3

在我找到一个可以在循环中正常工作的变体之前，尝试了所有这些变体和六种变体，这里是：

<script>
//<![CDATA[
$(document).ready(function ()
              {
                    $('.container').each(function () {
                        $(this).find('.content').hide();
                        $(this).find('.button').click(function ()
                        {
                            $(this).parent().find('.content').slideToggle(1500);
                        });
                    });
              });
 //]]>
 </script>

.container , .content {display:block;}

 <span class="container">
  ......visable content
  <span class="button">
  more info 
  </span>

  <span class="content">
  .......hidden content
  </span>

  </span>