Question

我四处寻找答案，对我来说没什么用。我希望能够单击一个div并更改背景，然后在下一次单击div时我希望它再次更改。第一部分有效，但我无法弄清楚如何做第二部分。

这是有效的（使用jQuery）：

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

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

Answer 1

我建议使用.toggleClass并将相关的css放入类中，而不是使用.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")

    });
});

单击时更改CSS，然后在下一次单击时再次返回

3 个答案: