0

これは私のjavascriptを書く際に繰り返される問題です:私はイベントを持っています:

$(document).on('click','.mi_piace_brick',function(){ 
   $this = $(this).children(),
   $that = $(this),
   i = s.get_current_step_id(),
   j = $that.attr('data-class'),
   counter = parseInt($('.like_counter_'+i+'_'+j).first().find('p').text());

   if($this.hasClass('liked')){
      $this.removeClass('liked');
   $('.like_counter_'+i+'_'+j).find('p').text(--counter);
   }
   else{
     $this.addClass('liked');
   $('.like_counter_'+i+'_'+j).find('p').text(++counter);
   }
  })

と

   $(document).on('click','.pref_brick',function(){ 
    $this = $(this).children(),
    $that = $(this),
    i = s.get_current_step_id(),
    j = $that.attr('data-class'),
    counter = parseInt($('.fav_counter_'+i+'_'+j).first().find('p').text());

        if($this.hasClass('preferito')){
        $this.removeClass('preferito');

        $('.fav_counter_'+i+'_'+j).find('p').text(--counter);
    }
    else{
        $this.addClass('preferito');
            $('.fav_counter_'+i+'_'+j).find('p').text(++counter);
        }
        })

ご覧のとおり、2 つの機能は基本的に非常に似ています。そんな場面によく遭遇します。あなたの意見では、トリックを行うために 1 つのバインドのみを使用する方法はありますか?

4

1 に答える 1

0

これらの要素を共有するクラスに割り当て、クリック イベントをその共有クラスにアタッチします。2 つを区別する必要がある場合は、要素のデータ属性を使用します。

<input class="sharedClass" data-parameter="enabled" />

$(document).on('click', '.sharedClass', function(eventObject) {
    eventObject.preventDefault();
    if ($(eventObject.target).data('parameter') == 'enabled') {
        // your logic for "enabled" element
    }
});
于 2013-03-18T17:46:58.557 に答える