切换图片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

切换图片src

回答

相关问题