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'});
}

如何将重复的css值存储在变量中以使代码重复性降低？

3 个答案: