jquery slidetoggle图像交换

Question

我试图让slideToggle交换基于如果一个div展开或折叠的图像。我有一种方式，它会将图像从加号改为减号，但它只能在一个div上工作，而我有多个，只能使用一次。它不切换。

这里是jQuery的：

$(".content").toggle(1); 
$(".expand").click(function() { 
    $(this).next(".content").slideToggle(400); 

    if ($(".image1").attr('src', "../nathan/plus.png")) { 
     $(".image1").attr(
      'src', 
      $(".image1").attr('src').replace('plus', 'minus') 
     ); 
    } else { 
     $(".image1").attr(
      'src', 
      $(".image1").attr('src').replace('minus', 'plus') 
     ); 
    } 
}); 
}); 

的的IndexOf（）的作品，但如果我是复制的div他们都改变被点击时一个。下面是HTML：

<div class="list"> 
<h2 class="expand">Title1<img class="image1" src="../nathan/plus.png"></h2> 
<div class="content"> 
</div> 
</div> 

<div class="list"> 
<h2 class="expand">Title2<img class="image1" src="../nathan/plus.png"></h2> 
<div class="content"> 
</div> 
</div> 

Answer 1

您正在使用的setter方法来检查你的`src”中

if ($(".image1").attr('src', "../nathan/plus.png")) 

改用

if ($(".image1").attr('src') == "../nathan/plus.png")) 

甚至更​​好只是检查源包含使用indexOf()

if ($(".image1").attr('src').indexOf("plus.png") > -1) 

编辑：

你也许可以做到这样的，以防止所有更改 - 这是上下文中寻找图像

$(".expand").click(function() { 
    $(this).next(".content").slideToggle(400); 
    var $img = $(".image1", this); 
    if ($img.attr('src').indexOf("plus.png") > -1) { 
     $img.attr('src', $img.attr('src').replace('plus', 'minus')); 
    } else { 
     $img.attr('src', $img.attr('src').replace('minus', 'plus')); 
    } 
});​ 

所以

$(".image1", this); 

会就像

$(this).find('.image1');