Question

我有多个div，其中包含相似的代码，但在主div中也有一个唯一的id，用于调用toggleClass＆amp; slideToggle功能。我正在尝试创建一个循环，这样我就不必为每个元素编写类似的代码。

---工作代码---（id后面的数值会改变）

$('#er1').click(function() {
    $('#er1').toggleClass('but-extra-on');
    $('#cr1').toggleClass('but-closerow-on');
    $('#er1').next('div').slideToggle('slow');
    return false;
});

- 没有工作代码 - （我希望点击＃er1，＃er2，＃er3等功能。）

var count = 1;
while (count < 10){
    var curER = 'er'+count; 
    var curCR = 'cr'+count; 
    $('#'+curER).click(function() {
        $('#'+curER).toggleClass('but-extra-on');
        $('#'+curCR).toggleClass('but-closerow-on');
        $('#'+curER).next('div').slideToggle('slow');
    });
    count++;
}

* 出于某种原因，当我使用while代码时，每当我点击＃er1，＃er2，＃er3等时，只有＃er9的事件才会切换。

Answer 1

您可以通过对要点击的选项使用$（this）选择器，并将html数据属性附加到div，指定要在单击并选择时要更改的其他div来解决此问题另一个......有意义..可能不是吗？查看下面的解决方案1 。

第二种解决方案是使用jQuery Event Data将count变量传递给事件监听器。

解决方案1： http://jsfiddle.net/Es4QW/8/（这会使你的html膨胀一下）
解决方案2： http://jsfiddle.net/CoryDanielson/Es4QW/23/

我认为第二种解决方案效率稍高，因为HTML代码略少，$（this）对象略小。我认为，创建地图并将其作为事件数据传递的密集程度较低......但......实际上......没有区别...... the second solution has cleaner HTML code, so you should use that.

解决方案3 w / .slideToggle（）： http://jsfiddle.net/CoryDanielson/Es4QW/24/

编辑：通过传入所选元素而不是选择器来更新解决方案。现在，每次点击事件都不会像之前那样进行DOM查找。

Answer 2

我以前遇到过这个问题。我通过将事件监听器代码提取到它自己的函数中来修复它，如下所示：

for (var i = 1; i < 10; i++) {
    attachClickEvent('er'+i, 'cr'+i);
)

function attachClickEvent(cr, er)
{
    $('#'+er).click(function() {
        $(this).toggleClass('but-extra-on');
        $('#'+cr).toggleClass('but-closerow-on');
        $(this).next('div').slideToggle('slow');
    });
}

在动态id和类的jquery中循环

2 个答案: