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

Combine 2 functions to one in jQuery

本文关键字：一个 函数 jQuery 中将 合并      更新时间：2023-09-26

我有一个小的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');
    });
}

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

只需更改您的代码：

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

你需要id选择器#和id（control）

改变 

$(control)

自 

$('#'+control);

$('#rearw li a, #rearq li a').click(function(ev){
    ev.preventDefault();
    var id = $(this).data('id'), 
        parent = $(this).closest('ul'), // assuming #rearw and #rearq are <ul> elements
        parentId = parent.attr('id'); // get 'rearw' or 'rearq'
    parent.find('a').not($(this).toggleClass('selected')).removeClass('selected');
    $('#' + parentId +'-tints li').not($('#'+id).toggleClass('shown')).removeClass('shown');
});
大致如下

：

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

不确定我是否在转换时犯了错误，但这个想法:)

相关文章：