javascript 动态ID和类的jquery中的while循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7999668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
While loop in jquery of dynamic id and class
提问by bobe
I have have multiple divs' with similar code within it, but also has a unique id within the main div that calls a toggleClass & slideToggle function. I'm trying to create a loop so that I do not have to write similar code for each element.
我有多个带有类似代码的 div，但在主 div 中也有一个唯一的 id，它调用了 toggleClass 和 slideToggle 函数。我正在尝试创建一个循环，这样我就不必为每个元素编写类似的代码。
--- working code --- (where numeric value after the id would change)
--- 工作代码 --- （其中 id 后的数值会改变）
$('#er1').click(function() {
$('#er1').toggleClass('but-extra-on');
$('#cr1').toggleClass('but-closerow-on');
$('#er1').next('div').slideToggle('slow');
return false;
});
-- not working code -- (I want to have functions for the click of #er1, #er2, #er3 etc.)
-- 不工作的代码 -- （我想要点击#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++;
}
*for some reason, when I use the while code, whenever I click #er1, #er2, #er3 etc.. only the event for #er9 toggles.
*出于某种原因，当我使用 while 代码时，每当我单击 #er1、#er2、#er3 等时，只有 #er9 的事件切换。
回答by Cory Danielson
You can solve this problem, by using the $(this) selector for the one that you are clicking, and attaching an html data attribute to the div, specifying the other div that you want to change when you click it and selecting the other one with that... make sense.. probably not? Check out Solution 1below.
您可以解决这个问题，通过为您单击的那个使用 $(this) 选择器，并将一个 html 数据属性附加到 div，指定您单击时要更改的另一个 div 并选择另一个那个……有道理……可能不是？查看下面的解决方案 1。
The second solution is to use jQuery Event Datato pass the count variable into the event listener.
第二种解决方案是使用jQuery Event Data将计数变量传递到事件侦听器中。
Solution 1: http://jsfiddle.net/Es4QW/8/(this bloats your html a bit)
Solution 2: http://jsfiddle.net/CoryDanielson/Es4QW/23/
解决方案 1：http : //jsfiddle.net/Es4QW/8/（这会使您的 html 有点膨胀）
解决方案 2：http : //jsfiddle.net/CoryDanielson/Es4QW/23/
I believe the second solution is slightly more efficient, because you have slightly less HTML code, and the $(this) object is slightly smaller. Creating the map and passing it as event data, I believe, is less intensive... but... realistically... there's no difference... the second solution has cleaner HTML code, so you should use that.
我相信第二种解决方案效率更高，因为您的 HTML 代码略少，而 $(this) 对象略小。我相信，创建地图并将其作为事件数据传递的强度较低……但是……实际上……没有区别……the second solution has cleaner HTML code, so you should use that.
Solution 3 w/ .slideToggle(): http://jsfiddle.net/CoryDanielson/Es4QW/24/
带有 .slideToggle() 的解决方案 3：http : //jsfiddle.net/CoryDanielson/Es4QW/24/
Edit: Updated solutions by passing in the selected elements instead of the selectors. Now each click event will not do a DOM lookup as it did before.
编辑：通过传入所选元素而不是选择器来更新解决方案。现在每个点击事件都不会像以前那样进行 DOM 查找。
回答by Yes Barry
I've run into this problem before. I fixed it by extracting the event listener code into its own function like so:
我以前遇到过这个问题。我通过将事件侦听器代码提取到它自己的函数中来修复它，如下所示：
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');
});
}
