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

如果您使用.on()＆gt;，则应使用.bind()方法代替jQuery 1.7。 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);
    });
});

Demo

Answer 2

首先，使用jQuerys on代替bind。

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

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

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

Answer 3

而不是绑定按钮下的img点击使用此

＆＃13;

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

＆＃13;

我已经测试了它的工作，你的代码中的其他任何东西都很好，但是你可以稍微优化一下代码。

Answer 4

从#sortButton更改为#Button1！链接到jsFiddle，tested with 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>

Jquery按钮图像更改在IE和Firefox中无法正常工作

4 个答案: