تغيير خلفية العنصر باستخدام خاصية 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

أنت سوء فهم مفهوم رد الاتصال. رد الاتصال في البرمجة هو وظيفة يتم استدعاؤها مباشرة بعد الرمز التنفيذي.

في حالتك ، أنت تقول ما يلي:

عند النقر ، اضبط موضع الخلفية على -40 بكسل. بمجرد الانتهاء من ذلك ، قم بتعيينه على 40 بكسل (أترد على الفور ما الذي فعلت وظيفتك للتو).

في هذه الحالة ، لا تحتاج إلى استخدام وظيفة رد الاتصال. تحتاج إلى إعداد تبديل بحيث عندما ينقر المستخدم على العنصر الخاص بك ، يتم تشغيل وظيفة واحدة ... ثم في المرة التالية التي ينقرون فيها على هذا العنصر ، يتم تشغيل الوظيفة الثانية.