Javascript 在jQuery中将两个函数合并为一个

我有一个小的jquery函数，根据所选内容显示和隐藏，我有两个函数在同一页面上运行，但每个函数都有自己的数据附加到所选内容，我想知道如何整理下面的函数-我是否可以通过使用.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');
    });
}  

---

非常感谢任何帮助/指点

您需要id选择器

#

以及id（控件）

改变

$(control) 

到

---

您需要id选择器

#

和id（控件）一起使用

改变

$(control) 

到

只需更改您的代码：

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

只需更改您的代码：

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

$（'rearw li a，'rearq li a'）。单击（功能（ev）{
ev.preventDefault（）；
var id=$（this）.data（'id'），
parent=$（this）.nexist（'ul'），//假设#rearw和#rearq是
元素
parentId=parent.attr（'id'）；//获取'rearw'或'rearq'
parent.find（'a'）。not（$（this.toggleClass（'selected'））。removeClass（'selected'）；
$（'#'+parentId+'-tints li'）。不（$（'#'+id.）。切换类（'show'））。removeClass（'show'）；
});

$（'rearw li a，'rearq li a'）。单击（功能（ev）{
ev.preventDefault（）；
var id=$（this）.data（'id'），
parent=$（this）.nexist（'ul'），//假设#rearw和#rearq是
元素
parentId=parent.attr（'id'）；//获取'rearw'或'rearq'
parent.find（'a'）。not（$（this.toggleClass（'selected'））。removeClass（'selected'）；
$（'#'+parentId+'-tints li'）。不（$（'#'+id.）。切换类（'show'））。removeClass（'show'）；
});

下面我们来说说：

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

---

我不确定我在转换时是否犯了错误，但我的想法是：）

这样做怎么样：

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

---

不确定我在转换时是否犯了错误，但想法是：）

好的，很酷，谢谢你给我指明了正确的方向-第一组很好用，但第二组似乎被禁用了，这就是为什么我想使用一个each，我的代码中是否存在只允许第一个分组运行的错误？再次感谢！嘿@jamie，过了一段时间我发现了这个问题。请尝试更新的代码。如果这次你做对了，请告诉我。：）啊哈，谢谢！这正是我想要达到的，非常感谢！好的，很酷，谢谢你给我指出了正确的方向-第一组工作得很好，但是第二组似乎被禁用了，这就是为什么我认为我应该使用一个each，我的代码中是否有错误，只允许第一组工作？再次感谢！嘿@jamie，过了一段时间我发现了这个问题。请尝试更新的代码。如果这次你做对了，请告诉我。：）啊哈，谢谢！这正是我想要达到的，非常感谢！