Как объединить две функции jQuery

Question

Доброе утро.

Я хочу объединить функции jQuery в один.

$('body').on('click', '.toggle2', function() { 
    console.log(123); 
    $('body').find('.dateshow').toggleClass('show'); 

}); 

$('body').on('click', '.toogle3', function() { 
    $('body').find('.autorshow').toggleClass('show'); 
}); 


$('body').on('click', '.toogle4', function() { 
    console.log(123); 
    $('body').find('.starshow').toggleClass('show'); 

}); 

Большое спасибо заранее

Answer 1

Если изменить все ваши коленно-рычажного иметь следующую разметку:

<a href="#" class="toggle" data-toggle="dateshow">click</a> 
<a href="#" class="toggle" data-toggle="autorshow">click</a> 
<a href="#" class="toggle" data-toggle="starshow">click</a> 

Затем вы можете добавить более общий обработчик, такие как:

$('.toggle').on('click', function() { 
    var targetSelector = $(this).attr('data-toggle'); 
    $('.' + targetSelector).toggleClass('show'); 
}); 

Codepen: http://codepen.io/anon/pen/aBKJEb

Answer 2

Когда обратный вызов называется jQuery, будет передан объект события. Вы можете проверить target события и процесс по мере необходимости.

$('body').on('click', '.toggle2, .toogle3, .toogle4', function(e) { 
    var $target = jQuery(e.target), 
     $targetObject; 

    if($target.hasClass('toggle2')) { 
     $targetObject = jQuery('body').find('.dateshow'); 
    } 
    if($target.hasClass('toogle3') { 
     $targetObject = jQuery('body').find('.autorshow'); 
    } 
    if($target.hasClass('toogle4') { 
     $targetObject = jQuery('body').find('.starshow'); 
    } 

    $targetObject.toggleClass('show'); 
}); 

Answer 3

$('body').on('click', '.toggle2,.toogle3,.toogle4', function() { 
    var mapper = { 
     'toggle2': { cls: '.dateshow', console:true }, 
     'toggle3': { cls: '.autorshow', console:false }, 
     'toggle4': { cls: '.starshow', console:true } 
    }; 
    this.classList.forEach(function(cls) { 
     var obj = mapper[cls]; 
     if(obj) { 
      obj.console && console.log(123); 
      $('body').find(obj.cls).toggleClass('show'); 
     } 
    }); 
});