javascript - Jquery 按钮图像更改在 IE 和 Firefox 中不起作用

Question

按钮 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>

Answer 1

如果您使用 jQuery 1.7，则应使用 .on() 方法而不是 .bind()。 img 被一个 button 包裹着，所以最好的方法是处理这个元素中的点击事件。

您还可以稍微干燥一下代码，使其更简单:

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

Demo