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

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

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

切换图像src

3 个答案: