在个别div上使用jquery toggle

Question

我正在尝试使用加号和减号框创建切换效果，用于显示和隐藏div。以下是示例http://theodin.co.uk/tools/tutorials/jqueryTutorial/index.html。

这是我使用的脚本。

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

The 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中运行良好，但是当我有多个div时，当我点击其中一个时，所有的都会显示出来。是否有一种方法可以使用我已有的代码分别切换它们？

- user499630

Answer 1

你正在更改 #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必须是唯一的。

- user113716

---

此外，div 元素和 img 元素都有一个 ID 为 "show"。看，今晚整个团队都在这里！ - karim79

@karim79 - 对。刚刚更新完毕。:o) - user113716

感谢您提供的代码！我尝试了一下，但是出现了相同的问题。也许我的HTML有问题。不过Gert提供的代码似乎可以工作。 - user499630

@user - 如果您有多个相同的ID，那么可能会出现问题。这往往会导致事情出错。 - user113716

Answer 2

将 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" );
});

这是一个例子。

- Gert Grenander

---

谢谢！这个可行！您知道如果使用jQuery，是否可以在单击块外部或切换到另一个块时隐藏块div吗？ - user499630

顺便说一下，我已经使用实际图像URL更新了代码，但是图像没有改变。 - user499630

我的错，我没有测试图片。我们将使用 children("img") 来实现。我已经更新了上面的示例以反映这一点。 - Gert Grenander

太棒了，谢谢！这也解决了另一个问题，即所有图像同时更改的问题。 - user499630