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() 进行更改，这与 click 类似，只不过它接受多个函数参数。

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

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