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

如何组合两个jQuery函数

3 个答案: