更改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"); 
     } 
    }); 
    }); 
});