切换图像源

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

我更喜欢为元素使用背景图像并在点击时切换类：

<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 2

你也可以这样做，通过改变这个

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

Answer 3

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

});