javascript - 单击时更改 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

我同意使用的建议.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");
      }
    });
  });
});

Answer 3

您应该使用 css 类并切换它。

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

$(document).ready(function(){

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

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

    });
});