javascript - 如何将重复的 css 值存储在变量中以减少代码的重复性？

Question

  $('ul#range-drop li#product1')
    .css( {backgroundPosition: '-914px 0px'} )
    .mouseover(function(){
      if (!($('ul#range-drop li#product1 a').hasClass("current")) ) {
        $(this).css( {background: "none"} );
        $(this).parent().stop().animate({backgroundPosition: '-914px -12px' }, {duration:400, easing: 'easeInOutQuint'});
      }
   })

  .mouseout(function(){
   $(this).parent().stop().animate({backgroundPosition : '-914px 0px'}, {duration:400, easing: 'easeInOutQuint'});
   });

此代码块针对背景位置具有不同值的每个导航元素重复

Answer 1

您应该将值存储在 data- 属性或 JavaScript 映射中；

var map = {
  product1 : ['-914px 0px', '-914px -12px']
}

$('ul#range-drop li').each(function() {
    $(this).css('backgroundPosition', map[this.id][0]);
}).mouseover(function() {
    if (!($(this).hasClass("current"))) {
        $(this).css({
            background: "none"
        });
        $(this).parent().stop().animate({
            backgroundPosition: map[this.id][1]
        }, {
            duration: 400,
            easing: 'easeInOutQuint'
        });
    }
}).mouseout(function() {
    $(this).parent().stop().animate({
        backgroundPosition: map[this.id][0]
    }, {
        duration: 400,
        easing: 'easeInOutQuint'
    });
});​

map 包含默认背景位置作为数组中的第一个元素，动画位置作为第二个元素(当然，您可以根据需要更改它，这只是一个让您入门的想法)。