jquery - 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() 为toggle()，这与 click 类似，只是它接受多个函数参数。

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

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