Jquery button img 更改在 IE 和 Firefox 中不起作用

Jquery button img change not working in IE and Firefox

本文关键字：Firefox 不起作用 IE button img Jquery      更新时间：2023-09-26

按钮img在chrome中变化得很好，但是在IE和Firefox中，代码似乎被完全忽略了。

$(function(){
    var counter = 0;
    $("#sortButton").bind('click', function(){
        if (counter == 0) {
            counter = 1;
            $("#sortButton").attr('src', '../../images/sortbttn.png');
        }
        else {
            counter = 0;
            $("#sortButton").attr('src', '../../images/sortbttnclosed.png');
        }
    });
});

<button class="btn btn-default dropdown-toggle sortbutton" type="button" id="Button1" data-toggle="dropdown">
    <img id="sortButton" src="../../images/sortbttnclosed.png" />
</button>
如果您

使用的是 jQuery> 1.7，则应使用方法 .on() 而不是 .bind()。img用 button 包装，所以最好的方法是处理此元素中的 click 事件。

你也可以干一点你的代码，让它更简单：

$(function () {
    $("#sortButton").closest('button').on('click', function () {
        var img1 = '../../images/sortbttn.png';
        var img2 = '../../images/sortbttnclosed.png';
        var currentImg = $('#sortButton', this).attr('src');
        $('#sortButton', this).attr('src', currentImg === img1 ? img2 : img1);
    });
});

演示

而不是绑定单击按钮下的 img 使用这个 

$("#Button1").bind('click', function(){
  ^ change this

我已经测试了它的工作，您的代码中的其他一切都很好，但是您可以稍微优化代码。

首先，使用 jQuerys on 而不是 bind 。

"从jQuery 1.7开始，.on（）方法是将事件处理程序附加到文档的首选方法。

其次，这可能是缓存问题。尝试隐藏并再次显示元素：

$(function(){
    var counter = 0;
    $("#sortButton").on('click', function(){
        if (counter == 0) {
            counter = 1;
            $("#sortButton").attr('src', '../../images/sortbttn.png').hide().show();
        }
        else {
            counter = 0;
            $("#sortButton").attr('src', '../../images/sortbttnclosed.png').hide().show();
        }
    });
});

从#sortButton更改为#Button1！链接到jsFiddle，用IE测试

$(function () {
    var counter = 0;
    $("#Button1").click( function () {
        if (counter == 0) {
            counter = 1;
            $("#sortButton").attr('src', 'http://www.clker.com/cliparts/3/8/b/a/11971212312045077795webmichl_powerbutton_2_states_(_on_off_).svg.med.png');
        } else {
            counter = 0;
            $("#sortButton").attr('src', 'http://www.clker.com/cliparts/S/4/F/9/3/r/round-button-off-md.png');
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default dropdown-toggle sortbutton" type="button" id="Button1" data-toggle="dropdown">
    <img id="sortButton" src="http://www.clker.com/cliparts/S/4/F/9/3/r/round-button-off-md.png" />
</button>

相关文章：