Jquery - 第一次点击更改背景位置，第二次重置

Question

晚上好！我有一半的脚本需要在单击元素时更改它的 CSS 背景位置 - 这很好用。但是我需要 CSS 在第二次点击时将背景位置重置为 0 0；

非常感谢您的帮助！

$(document).ready(function(){
$('#login-btn').click(function(){
                $('#login-btn').css('backgroundPosition', '0px -39px');
                 }, function(){
                $('$login-btn').css('backgroundPosition', '0px 0px');

             });
            });

Answer 1

我会将 CSS 放在一个类中，并使用 .toggleClass()。

示例： http://jsfiddle.net/xwnKP/

$('#login-btn').click(function(){
    $(this).toggleClass('clicked');
});

css

#login-btn {
    background-position: 0 0;
}
#login-btn.clicked {
    background-position: 0 -39px;
}

如果您想按照自己的方式进行操作，则需要从click() 更改为to toggle()，这与单击类似，只是接受多个函数参数。

示例： http://jsfiddle.net/xwnKP/1/

$('#login-btn').toggle(function() {
        $(this).css('backgroundPosition', '0px -39px');
    }, function() {
        $(this).css('backgroundPosition', '0px 0px');
});