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

将此代码放入一个函数中，其中输入参数是您要将代码绑定到的元素 ID 的名称、背景位置以及任何其他更改信息。然后你可以为每个元素只写一行（方法调用），但代码的核心只写一次。

例如（只是把它放在一起，没有测试它）

applyCSS('ul#range-drop li#product1', -194, 0)

function applyCSS(id, posx, posy)
{
  $(id)
    .css( {backgroundPosition: posx + 'px ' + posy + 'px'} )
    .mouseover(function(){
      if (!($(id).hasClass("current")) ) {
        $(this).css( {background: "none"} );
        $(this).parent().stop().animate({backgroundPosition: posx + 'px ' + posy + 'px'},     {duration:400, easing: 'easeInOutQuint'});
      }
   })

  .mouseout(function(){
   $(this).parent().stop().animate({backgroundPosition: posx + 'px ' + posy + 'px'},     {duration:400, easing: 'easeInOutQuint'});
   });

}

Answer 2

您应该将值存储在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'
    });
});​

地图包含默认背景位置作为数组中的第一个元素，动画位置作为第二个元素（当然，您可以随意更改它，这只是一个让您入门的想法）。

Answer 3

    $('ul#range-drop li#product1')
        .css( {backgroundPosition: '-914px 0px'} )
        .mouseover(function(){
          if (!($('ul#range-drop li#product1 a').hasClass("current")) ) {
            $(this).css( {background: "none"} );
           animation($(this),"-12");
          }
       })
          .mouseout(function(){
      animation($(this),"0")
       });

function animation(obj,valu)
{       obj.parent().stop().animate({backgroundPosition : '-914px '+valu+'px'}, {duration:400, easing: 'easeInOutQuint'});
}