在个人div上使用jQuery切换

我正在尝试使用+和 - 框来显示和隐藏div来创建切换效果。而例如http://theodin.co.uk/tools/tutorials/jqueryTutorial/index.html 在个人div上使用jQuery切换

这是我使用

$(function(){ 
     $('.block').hide(); 
      $('#show').toggle(function(){ 
        $('.block').show(); 
        $(this).attr("src","images/minus.jpg"); 
      },function(){ 
       $('.block').hide(); 
       $(this).attr("src", "images/plus.jpg"); 
      }); 
    });

的HTML脚本

<div id="show"> Open <img id="show" src="images/plus.jpg"/> </div> 
    <div class="block"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    </div>

它正常工作与一个DIV但我有多重，当我点击一个，他们都表演。有没有办法使用我拥有的代码单独切换它们？

来源

2010-11-09 user499630

更改show ID到class这样的：

<div class="show"> Open <img src="images/plus.jpg" /> </div> 
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 

<div class="show"> Open <img src="images/plus.jpg" /> </div> 
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

然后jQuery的变为：

$('.show').toggle(function(){ 
    $(this).next('.block').show(); 
    $(this).children("img").attr("src","images/minus.jpg"); 
},function(){ 
    $(this).next('.block').hide(); 
    $(this).children("img").attr("src", "images/plus.jpg"); 
});

Here's an example.

来源

2010-11-09 23:57:04

谢谢！这是有效的！你知道jQuery是否允许隐藏（）块的div，例如，一个点击块外的任何地方或切换另一个？ – user499630 2010-11-10 19:06:16

btw，我更新了实际图片网址的代码，但图片不变 – user499630 2010-11-10 19:37:52

我的不好。我没有测试图像。我们将使用'children（“img”）'来做到这一点。我已经更新了上面的示例以反映它。 – 2010-11-11 02:08:46

您正在更改#show元素的src，因为您应该将其更改为子元素<img>。

$(function() { 
    $('.block').hide(); 
    $('#show').toggle(function(){ 
     $('.block').show(); 
     $(this).children('img').attr("src","images/minus.jpg"); 
    },function(){ 
     $('.block').hide(); 
     $(this).children('img').attr("src", "images/plus.jpg"); 
    }); 
});

这使用.children()让孩子<img>元素，所以你可以改变它的来源。

此外，<img>与其父母具有相同的ID。这是不允许的。 ID必须是唯一的。

来源

2010-11-09 23:50:58 user113716

此外，div有和 “秀” 的ID，以及作为img。看，今晚的全体人员！ – karim79 2010-11-09 23:52:03

@ karim79 - 的确如此。刚刚完成更新。：o） – user113716 2010-11-09 23:52:45

谢谢你的代码！我尝试过，但由于某种原因我有同样的问题。也许我的HTML是错误的。但是，Gert提供的代码似乎工作。 – user499630 2010-11-10 19:07:41

在个人div上使用jQuery切换

回答

相关问题