jQuery的显示/隐藏W / DIV多个ID的 [英] jQuery Toggle Show/Hide w/Multiple DIV ID's

问题描述

code：

$(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类开关，当你点击checkmark1.jpg图像上可以看到。有多个切换的div类，它们一下子扩大。

Hidden Text is in a div class "toggle" to be seen when you click on the checkmark1.jpg image. With multiple "toggle" div classes, they all expand at once.

在切换设置为编号中的脚本和HTML，它们可以独立地扩大（因为我是怎么想），但你不能在整个使用相同的DIV ID＃名称。因此，如何将我改变code使用多个切换DIV的ID;或者用切换类，不扩大每个人一次???

When "toggle" is set to ID # in the Script and HTML, they expand independently (as how I would like), but you cannot use the same DIV ID # Name throughout. So how would i change the code to use multiple toggle DIV IDs; or use "toggle" classes that don't expand every one at once ???

下面是直接链接到我的code。
http://www.flipflopmedia.com/test/ToggleTEST_html.txt
当我尝试插入它，它被渲染，而不是显示，使得你可以看到它。是的，我使用的是code按钮输入code这里的应用它，不工作！

HERE is a direct link to my code. http://www.flipflopmedia.com/test/ToggleTEST_html.txt When I try to insert it, it's being rendered and not displaying so that you can actually see it. Yes, I'm using the code button 'enter code here' to apply it, not working!

推荐答案

由于您没有提供任何HTML，从工作，我剧本的作品

Since you didn't provide any HTML to work from, I put some together with script that works

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工作）

Script (updated to work with your 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 );
  });
 })
})

这篇关于jQuery的显示/隐藏W / DIV多个ID的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！