使用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

您应该考虑使用“切换”按钮这个功能......它允许你在两个不同的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（立即撤消功能刚刚执行的操作）。

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