Question

这是编写我的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);
        }
        })

如您所见，这两个功能基本上非常相似。在这种情况下，我经常遇到这种情况。在您看来，有一种方法只使用一个绑定来完成这个技巧吗？

Answer 1

为这些元素分配一个他们将共享的类，并将click事件附加到该共享类。如果需要区分这两者，请使用元素的数据属性。

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

将两个类似的点击事件合并为一个

1 个答案: