jquery - 使用 CSS 属性更改元素的背景

Question

我有一个带背景的 div，我想在点击时更改背景的位置。

这是我的 jQuery 片段：

$('#sprite').click(function () {
    $(this).css('backgroundPosition', '-40px');
});

虽然这工作正常，但我想通过“第二次”点击返回到原始位置，重置所有。

嗯，这就是所谓的“回调”吗？

我试过了，但没有奏效：

$('#sprite').click(function () {
    $(this).css('backgroundPosition', '-40px');
},function () {
    $(this).css('backgroundPosition', '40px');
});

Answer 1

您应该考虑为此使用“切换”功能...它将允许您在 2 个不同的 CSS 类之间切换...查看本教程在这里。

$('#sprite').click(function() {
   $(this).toggle(
      function(){
    $(this).css('backgroundPosition', '40px');
      }, 
      function () {
    $(this).css('backgroundPosition', '-40px');
    });
});

另一个选择而不是直接设置 CSS 属性是为您的背景创建一个 CSS 类并简单地切换该类。

CSS

<style type="text/css">
    .spritebg { background-position: -40px; }
</style>

jQuery

$("#spite").click(function() {
   $(this).toggleClass("spritebg");
});

Answer 2

用类来做。这要容易得多。

<style type="text/css">
    #spite.moved {
        background-position: -40px;
    }
</style>

<script type="text/javascript">
    $(function () {
        $("#spite").click(function () {
            $(this).toggleClass("moved");
        });
    });
</script>

Answer 3

您误解了回调的概念。编程中的回调是在执行代码后立即调用的函数。

在您的情况下，您说的是以下内容：

单击时，将我的背景位置设置为-40px。完成后，将其设置为 40px（立即撤消您的函数刚刚执行的操作）。

在这种情况下，您不需要使用回调函数。您需要设置一个切换，以便当用户单击您的元素时，运行一个函数......然后下次他们单击该元素时，运行第二个函数。