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 の名前、背景位置、およびその他の変更情報です。そうすれば、要素ごとに 1 行 (メソッド呼び出し) だけで済みますが、コードの核心部分は 1 回だけ記述されます。

たとえば（これを一緒に投げただけで、テストしませんでした）

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

マップには、配列の最初の要素としてデフォルトの背景位置が含まれ、2 番目の要素としてアニメーション化された位置が含まれます (もちろん、これは必要に応じて変更できますが、これは開始するための単なるアイデアです)。

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