使用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类之间切换...请查看本教程here。

$('#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

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

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

单击时，将我的背景位置设置为-40px。完成此操作后，将其设置为40px（立即撤消您功能的作用）。

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

Answer 3

与课程一起做。这要容易得多。

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

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