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');