Question

我已经尝试了所有三个，而且每个人都只运行一次，我必须刷新才能让它再次运行。这是我的代码。

$(document).ready(function(){
    $('#notificationTB').on('click', function(){
        document.getElementById('notificationTB').src='img/notifC.png';
        $('#notifBox').css('display', 'block');

        $(this).on('click', function(){
            document.getElementById('notificationTB').src='img/notif.png';
            $('#notifBox').css('display', 'none');
        });
    });
});

由于

Answer 1

只需使用.toggle()即可在display: block和display: none之间切换：

$(document).ready(function(){
    $('#notificationTB').on('click', function(){
        $('#notificationTB').attr('src',function(i,str) {
            return (str=='img/notifC.png') ? 'img/notif.png' : 'img/notifC.png';
        });
        $('#notifBox').toggle();
    });
});

或更好：

$(document).on('click', '#notificationTB', function(){
        $(this).attr('src',function(i,str) {
            return (str=='img/notifC.png') ? 'img/notif.png' : 'img/notifC.png';
        });
        $('#notifBox').toggle();
    });
});

http://api.jquery.com/attr/#attr-attributeName-functionindex--attr

Answer 2

看起来你正试图在两个州之间切换。你是如何做的并不是很好，因为在它自己的点击处理程序中定义一个元素的点击处理程序通常是不好的形式，特别是因为在这种情况下旧的不会被删除。试试这个：

$(document).ready(function(){
    $('#notificationTB').on('click', function(){
        var self = $(this); //refers to this element - $('#notificationTB')

        if(self.attr("src") == "img/notif.png"){
            self.attr("src", "img/notifC.png");
            $('#notifBox').css('display', 'block'); //.show() or .hide() will also do this
        } else {
            self.attr("src", "img/notif.png");
            $('#notifBox').css('display', 'none');
        }
    });
});

Answer 3

试试这个

$(document).ready(function(){
    $(document).on('click', '#notificationTB', function(){
        document.getElementById('notificationTB').src='img/notifC.png';
        $('#notifBox').css('display', 'block');

        $(this).on('click', function(){
            document.getElementById('notificationTB').src='img/notif.png';
            $('#notifBox').css('display', 'none');
        });
    });
});

或者你可能会改用

$(document).on('click', '#notificationTB', function(){
    $('#notificationTB').attr('src','img/notifC.png');
    $('#notifBox').css('display', 'block');
    $(this).on('click', function(){
        $('#notificationTB').attr('src','img/notif.png');
        $('#notifBox').css('display', 'none');
    });
});

Answer 4

为什么在使用jQuery时使用getElementById？

$(document).ready(function(){
    $('#notificationTB').on('click', function(){
        var $box = $('#notifBox'), $this = $(this);
        $box.toggle();      
        if($box.is(":visible")){
            $this.attr('src','img/notifC.png');
        }else{
            $this.attr('src','img/notif.png');
        }       
    });
});

jQuery .on（）,. live（）和.click（）都只运行一次

4 个答案: