切換圖片src

需要時點擊HREF與其他功能切換圖片src

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

});

感謝

來源

2011-12-15 Muhammed

你有沒有考慮使用類和CSS背景圖像？ – 2011-12-15 11:10:14

@Jørgen讓我嘗試這樣思考。感謝您的意見 – Muhammed 2011-12-15 11:11:28

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

});

來源

2011-12-15 11:10:08 Muhammed

感謝您的幫助。所以需要使用此代碼的css;） – Muhammed 2011-12-15 11:18:49

我寧願使用背景圖片的元素和切換上點擊類：

<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項目的大小應該適合圖像的大小。

來源

2011-12-15 11:14:22

你可以這樣做太，從這個

$(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);

來源

2011-12-15 11:22:13

回答

相關問題