更改CSS和未来点击

Question

再次回到我身边找了个答案，并没有为我工作。我希望能够点击一个div并更改背景，然后在下一次点击div时我希望它再次更改。第一部分的工作，但我不知道如何做第二部分。

这是什么工作（使用jQuery）：

$(document).ready(function(){ 
$('.button').click(function() { 
$('.icon').css("background-position", "0px 0px"); 
}); 
}); 

任何帮助，将不胜感激，谢谢。

Answer 1

而不是使用的CSS方法，我建议使用.toggleClass，并把相关的CSS成一个类：

$('.icon').toggleClass('myClass'); 

类定义：

.myClass { background-position: 0px 0px }; 

的.toggleClass方法将增加该类如果尚未存在，或者如果它已经移除。

Answer 2

你应该使用一个css类并切换它。

.zero{ 
    background-position: "0px 0px"; 
} 

$(document).ready(function(){ 

    $('.button').click(function() { 

      $('.icon').toggleClass("zero") 

    }); 
}); 

Answer 3

我recomendations同意使用.toggleClass()，但如果你想使用.css()试试这个：

$(document).ready(function(){ 
    $('.icon').each(function(){ 
    $(this).data('default-bg-pos', $(this).css('background-position')); 
    $(this).data('state', 0); 
    }); 
    $('.button').click(function() { 
    $('.icon').each(function(){ 
     if ($(this).data('state')) { 
     $(this).data('state', 0); 
     $(this).css('background-position', $(this).data('default-bg-pos')); 
     } else { 
     $(this).data('state', 1); 
     $(this).css("background-position", "0px 0px"); 
     } 
    }); 
    }); 
});