切換圖片來源

Question

單擊具有其他功能的HREF時需要更改圖像背景

<a href="#" id="showbilled_account">
    <img alt="" src="images/btn_showBillAccounts.gif" id="showBillAccounts" />
</a> 

還有其他一些撥動與相同的按鈕。 所有功能運行正常。 不幸的是，我必須單擊兩次以更改圖像src

這是我的腳本代碼

$(document).ready(function() {
        var valueTextbox = $("#FilterTextBox").val();
        $('#tbl_container tbody tr:not(:contains("' + valueTextbox + '"))').hide();
        $('#tbl_container tbody tr:contains("' + valueTextbox + '")').show();
        $(".pagination").hide();
        $(".searchresult.spacetop").hide();
        $(".exp_coll_wrap_alone").hide();

    $("#showbilled_account").click(function() { 
        var valueTextbox = $("#FilterTextBox").val();
        $('#tbl_container tbody tr:contains("' + valueTextbox + '")').toggle();
        $('#tbl_container tbody tr:contains("")').toggle(); 
        $(".pagination").toggle();
        $(".exp_coll_wrap_alone").toggle();

        $(function(){
            $('#showbilled_account').toggle(function(){
             $('#showBillAccounts').attr("src","images/btn_hideBillingAccounts.gif" );
            },function(){
              $('#showBillAccounts').attr("src", "images/btn_showBillAccounts.gif" );
            });
        });
 });

});

提前致謝

Answer 1

您可以使用if語句

if( $("#showBillAccounts").attr("src") == "images/btn_hideBillingAccounts.gif" ) {
  $('#showBillAccounts').attr("src", "images/btn_showBillAccounts.gif" );
} else {
$('#showBillAccounts').attr("src","images/btn_hideBillingAccounts.gif" );
} });

像這樣

$(document).ready(function() {
        var valueTextbox = $("#FilterTextBox").val();
        $('#tbl_container tbody tr:not(:contains("' + valueTextbox + '"))').hide();
        $('#tbl_container tbody tr:contains("' + valueTextbox + '")').show();
        $(".pagination").hide();
        $(".searchresult.spacetop").hide();
        $(".exp_coll_wrap_alone").hide();

    $("#showbilled_account").click(function() { 
        var valueTextbox = $("#FilterTextBox").val();
        $('#tbl_container tbody tr:contains("' + valueTextbox + '")').toggle();
        $('#tbl_container tbody tr:contains("")').toggle(); 
        $(".pagination").toggle();
        $(".exp_coll_wrap_alone").toggle();

        if( $("#showBillAccounts").attr("src") == "images/btn_hideBillingAccounts.gif" ) {
            $('#showBillAccounts').attr("src", "images/btn_showBillAccounts.gif" );
        } else {
            $('#showBillAccounts').attr("src","images/btn_hideBillingAccounts.gif" );
        } });

});

Answer 2

我更喜歡使用background-images作為元素，並在單擊時切換類：

<a href="#" id="showbilled_account" class="showBillingAccounts"></a>

請注意，我已刪除了img標簽，並且錨點基本上沒有任何內容。 通過為a指定高度和寬度，您將擁有一個按鈕。

$('#showbilled_account').click(function(){
  toggleClass('showBillingAccounts', 'hideBillingAccounts');
}

CSS：

.showBillingAccounts{ background-image : url("images/btn_showBillAccounts.gif"); }
.hideBillingAccounts{ background-image : url("images/btn_hideBillAccounts.gif"); }
#showbilled_account{ height: 100px; width: 100px; padding: 0 }

這樣，您可以使HTML在語義上更加正確，並變得更易於維護。 請注意，＃showbilled_account項目的大小應適合圖像的大小。

Answer 3

您也可以通過更改此方法來執行此操作

$(function(){
   $('#showbilled_account').toggle(function(){
     $('#showBillAccounts').attr("src","images/btn_hideBillingAccounts.gif" );
   },function(){
        $('#showBillAccounts').attr("src", "images/btn_showBillAccounts.gif" );
     });
});

對此

      var mSrc = ($(#showBillAccounts).attr("src") === "images/btn_hideBillingAccounts.gif") ? "images/btn_showBillAccounts.gif" : "images/btn_hideBillingAccounts.gif";
      $(#showBillAccounts).attr("src", mSrc);