jQuery 在 for 循环中定义点击事件（从对象数组中获取点击事件信息）答案

【问题标题】：jQuery defining click events in for loop (taking click event info from array of objects)jQuery 在 for 循环中定义点击事件（从对象数组中获取点击事件信息）
【发布时间】：2014-02-18 09:12:03
【问题描述】：

让我们从代码开始：

function PopupDrop(n) { // function to trigger on click
    for (var i=0; i<Popups.length; i++) {
        if (($(Popups[i]['w']).css('display') != 'none') && (n != Popups[i]['w'])) {
            $(Popups[i]['w']).stop(true,true).slideUp(150);
        }

    // Poping actual popup
    if ($(n).css('display') == 'none') $(n).slideDown(150);
    else $(n).slideUp(150);
}
var Popups = [ // Array of ID which we click, and ID's which we send to click trigger function
    {c:'#Payment-Selection',w:'#Cards-Popup'},
    {c:'#Drop-SY',w:'#Start-Years'},
    {c:'#Drop-SM',w:'#Start-Months'}];
function ActivatePopups() { // Defining click events function
    for (var i=0; i<Popups.length; i++) { 
        var Wt = Popups[i]['w'];
        $(Popups[i]['c']).click(function() {
            PopupDrop(Wt); console.log(Wt);
        });
    console.log('On click here: '+Popups[i]['c']+' do this:'+Popups[i]['w']); }
}
ActivatePopups();

基本上我在做自定义选择框，当其他人向下滑动时，它必须向上滑动。这里的问题是功能ActivatePopups控制台记录了它应该是什么，但是当我点击不同的定义元素（例如#Payment-Selection，#Drop-Sy ...）时，点击不会触发下拉菜单和控制台。日志在所有点击中显示相同的 ID...如果我定义没有 for 循环的点击，例如。 $('#Payment-Selection').click(function() { PopupDrop('#Cards-Popup'); }); 它很有魅力......但因为我有很多不同的 ID 我想用 for 循环来缩短代码。

任何想法为什么会发生？

http://jsfiddle.net/aw7bt/1/

【问题讨论】：

正确呈现您的代码将使其他编码人员更容易审查它。将这么多放在一行上会使代码难以理解。
我同意，没有人愿意横向滚动。
抱歉，已修正为更清晰
你能做个小提琴吗？（对我来说，这看起来像是一个关闭问题，顺便说一句）
jsfiddle.net/aw7bt/1

标签： javascript jquery object for-loop

【解决方案1】：

我使用回调函数修复了它：

function PopupCallBack(x) {
   return function (e) {
      PopupDrop(x);
   };
}
function ActivatePopups() {
    for (var i=0; i<Popups.length; i++) { var Wt = Popups[i]['w']; $(Popups[i]['c']).click(PopupCallBack(Wt));
    console.log('On click here: '+Popups[i]['c']+' do this:'+Popups[i]['w']); }
}

感谢 Tomasz Kowalczyk 的回答

【讨论】：

【解决方案2】：

可以通过多种方式解决此问题。您可以使用闭包，或将 Popups 变量设为对象（使用键值对，如 var Popups = {'Payment-Selection':'Cards-Popup',...），但需要对代码进行最少修改的解决方案是使用自定义属性，如下所示：

$(Popups[i]['c']).attr('Wt', Popups[i]['w']).click(function () {
        var Wt = this.getAttribute('Wt');
        PopupDrop(Wt);
        console.log(Wt);
});

DEMO

【讨论】：

【解决方案3】：

也许这对你有用：http://jsfiddle.net/5vWA4/

我以不同的方式实现它，但恕我直言它更简单。

function ActivatePopups() {
    $('.popup-activator').click(function(){
        console.log($(this).data('w'));
    });
}

【讨论】：