jQuery 切换显示/隐藏多个 DIV ID

Question

代码:

$(document).ready(function() {

    $('.toggle').hide();

    $('.show').click(function(){

        $('.toggle').toggle('slow'); 

        $(this).attr('src','images/checkmark2.jpg');

    },function(){

        $('.toggle').toggle('slow'); 

        $(this).attr('src', 'images/checkmark1.jpg');

        return false;
    });
});

HTML:

<img class="show" src="images/checkmark1.jpg"/>Header Text

隐藏文本位于 div 类“toggle”中，当您单击 checkmark1.jpg 图像时可以看到。通过多个“切换”div 类，它们会同时展开。

当脚本和 HTML 中的“toggle”设置为 ID # 时，它们会独立扩展(如我所愿)，但您不能始终使用相同的 DIV ID # 名称。那么我将如何更改代码以使用多个切换 DIV ID；或使用不会一次展开所有类的“切换”类 ???

这里是我的代码的直接链接。 http://www.flipflopmedia.com/test/ToggleTEST_html.txt 当我尝试插入它时，它正在渲染而不是显示，因此您可以实际看到它。是的，我正在使用代码按钮“在此处输入代码”来应用它，但没有用!

Answer 1

由于您没有提供任何 HTML 以供使用，我将一些 HTML 与有效的脚本放在一起

HTML

 <img class="show" src="images/checkmark1.jpg" /><span>Header Text 1</span>
 <div class="toggle">This is some hidden text #1</div>

 <img class="show" src="images/checkmark1.jpg" /><span>Header Text 2</span>
 <div class="toggle">This is some hidden text #2</div>

脚本(已更新以与您的 HTML 一起使用)

$(document).ready(function(){
 $('.toggle').hide();
 $('.show').click(function(){
  var t = $(this);
  // toggle hidden div
  t.next().next().toggle('slow', function(){
   // determine which image to use if hidden div is hidden after the toggling is done
   var imgsrc = ($(this).is(':hidden')) ? 'images/checkmark1.jpg' : 'images/checkmark2.jpg';
   // update image src
   t.attr('src', imgsrc );
  });
 })
})