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就无法分辨。如果它们是基于索引的，您可以使用所单击的elemetn的索引

来访问它

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

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

3 个答案: