javascript - 在 jQuery 中将 2 个函数合并为一个

Question

我有一个小的 jquery 函数，可以根据选择的内容显示和隐藏，我在同一页面上运行了其中的 2 个函数，但每个函数都有自己的数据附加到所选内容，我想知道如何整理下面的函数 - 我是否可以通过使用 .attr 函数找出 id，然后对每件事使用某种类型来为 #rearq/#rearw 创建一个变量？

$('#rearw li a').click(function(ev){
        ev.preventDefault();
        var id = $(this).data('id');
        $('#rearw li a').not($(this).toggleClass('selected')).removeClass('selected');
        $('#rearw-tints li').not($('#'+id).toggleClass('shown')).removeClass('shown');
    });
    $('#rearq li a').click(function(ev){
        ev.preventDefault();
        var id = $(this).data('id');
        $('#rearq li a').not($(this).toggleClass('selected')).removeClass('selected');
        $('#rearq-tints li').not($('#'+id).toggleClass('shown')).removeClass('shown');
    });

这是我到目前为止所拥有的:

var control = $('.control ul').attr('id'); // Get the id e.g #rearw / #rearq

$(control).each(function (index) {
    $(control + ' li a').click(function (ev) {
        ev.preventDefault();
        var id = $(this).data('id');
        $(control + ' li a').not($(this).toggleClass('selected')).removeClass('selected');
        $(control + '-tints li').not($('#' + id).toggleClass('shown')).removeClass('shown');
    });
}  

非常感谢任何帮助/指示!

Answer 1

只需更改您的代码:

var control = $('.control ul').attr('id');

对此:

var control = '#' + $('.control ul').attr('id');

此外，您不必在此处使用each 循环，因为ID 在DOM 中应该是唯一的。因此，您可以删除它并使用如下代码:

$(control + ' li a').click(function (ev) {
    ev.preventDefault();
    var id = $(this).data('id');
    $(control + ' li a').not($(this).toggleClass('selected')).removeClass('selected');
    $(control + '-tints li').not($('#' + id).toggleClass('shown')).removeClass('shown');
});

更新

你的代码

var control = $('.control ul').attr('id');

只会给你一个ID，因此你可以这样做，相同的逻辑，但进行了一些修改:

$('.control ul').each(function () {
    var control = '#' + this.id;

    $(control + ' li a').click(function (ev) {
        ev.preventDefault();
        var id = $(this).data('id');
        $(control + ' li a').not($(this).toggleClass('selected')).removeClass('selected');
        $(control + '-tints li').not($('#' + id).toggleClass('shown')).removeClass('shown');
    });
});