根據鏈接狀態顯示不同的圖像

Question

我有一個鏈接，用戶選擇，顯示一個段落，一旦他們選擇它，我希望它顯示不同的圖像，最初圖像將是一個加號（+）的符號，以可視化的方式通知它可以被點擊來滑動內容以看到，一旦它被點擊，我希望它變成一個減號（ - ），所以他們可以點擊，它會滑回備份並消失。

我得到了slideToggle下來，我只需要根據鏈接的當前狀態（顯示或隱藏）插入圖像文件路徑。

例jQuery和HTML：

<a href="#" class="slide-down">Click <img src="insert-filename-of-image"></a> 

$(document).ready(function() { 
$('.slide-down').click(function() { 
    $(".content-to-slide-down").slideToggle(100); 
}); 
}); 

所有我需要做的就是把適當的圖像文件名，路徑中的<img src="">

任何幫助表示讚賞。

Answer 1

$(document).ready(function() { 
$('.slide-down').click(function() { 
    $(".content-to-slide-down").slideToggle(100); 
    var img = $("img", this).attr("src"); 
    if(img == "plusimage-path") // or check the end of the path or similar 
    $("img", this).attr("src", "minusimage-path"); 
    else 
    $("img", this).attr("src", "plusimage-path"); 
}); 
}) 

Answer 2

可能沒有這樣做的最徹底的方法，但是這是我在我的網站上運行，現在：

$('.responseHeader').click(function(){ 
     if($(this).find('.plus').length) 
     { 
      var $expImg = $(this).find('.plus'); 
      $expImg.attr('src','/static/icons/minus_9x9.png'); 
      $expImg.addClass('minus'); 
      $expImg.removeClass('plus'); 
     } 
     else 
     { 
      var $expImg = $(this).find('.minus'); 
      $expImg.attr('src','/static/icons/plus_9x9.png'); 
      $expImg.addClass('plus'); 
      $expImg.removeClass('minus'); 
     } 
     $(this).parent().children('.responseBody').slideToggle(100);  
    }); 

編輯**這裏是上下文相關的HTML：

<div id='responsePane'> 


     <div class='response'>  
      <div class='responseHeader'> 
       <span><img class='expanderImg plus' src='/static/icons/plus_9x9.png' alt='expand'>&nbsp Response By: </span> 
       <span> <b>Adam Jones</b> </span>   
       <div class='responseDate' style='display:inline;width:100%;'><span> &nbsp&nbsp&nbsp&nbsp&nbsp<i>2010-06-15</i> </span></div> 
      </div> 

      <div class='responseBody'> 
       <span> <b>Response: </b></span> 
       <span> Test Response </span> 
      <br /> 
      </div> 
     </div> 

     <div class='response'>  
      <div class='responseHeader'> 

       <span><img class='expanderImg plus' src='/static/icons/plus_9x9.png' alt='expand'>&nbsp Response By: </span> 
       <span> <b>John Smith</b>&nbsp<img align='top' src='/static/icons/fmlogo_16x16.png' alt='Fi-Med'> </span>   
       <div class='responseDate' style='display:inline;width:100%;'><span> &nbsp&nbsp&nbsp&nbsp&nbsp<i>2010-06-15</i> </span></div> 
      </div> 
      <div class='responseBody'> 

       <span> <b>Response: </b></span> 
       <span> Test Response </span> 
      <br /> 
      </div> 
     </div> 

Answer 3

有幾種不同的方式來做到這一點。最簡單的可能就是使用回調。

$(document).ready(function() { 
$('.slide-down').click(function() { 
    $(".content-to-slide-down").slideToggle(100, function() { 
    if ({{ whatever condition you can use to check }}) { 
     $('img').attr('src', {{ URL HERE }}); 
    } 
    else { 
     $('img').attr('src', {{ OTHER URL HERE }}); 
    } 
    }); 
}); 
}); 

另一種選擇是使用.toggle（）

$(document).ready(function() { 
    $('.slide-down').toggle(function() { 
     $(this).slideDown(); 
     $('img#id_of_image_here').attr('src', 'URL to minus icon'); 
     // whatever else you want to happen on first click 
    }, 
    function() { 
     $(this).slideUp(); 
     $('img#id_of_image_here').attr('src', 'URL to plus icon'); 
     // whatever you want the other click, it will track state for you. 
    } 
    ); 
});