如何結合兩個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');
        }
    });
});