3

通过循环查询并添加当前行，我们在 ColdFusion 页面（internshipHandleX、internshipHiddenX 等）中动态构建了一个配对 div 列表，例如：

<div id="internshipHidden#internship.currentrow#" class="hidden pop-up">

我们想作为模态窗口和相应的触发器绑定在一起。使用此代码：

for (var row = 1; row <= totalInternships; row ++){
    var thisHandle = "#internshipHandle" + row;
    var thisHidden = "#internshipHidden" + row;
    $(thisHandle).click(function(e){
        e.preventDefault();
        $(thisHidden).bPopup({modalColor:"black"});
    });
}

我们显然将所有的实习句柄（s）链接到最后一个实习隐藏。我错过了什么？有没有更好的方法从动态创建的 css-hidden div 中制作模态窗口（即在骨架框架内？我真的不想使用 bs 重新开始。）

DreamWeaver 不喜欢我将函数放入循环中，但所有酷孩子都告诉我不要听它。

编辑：用 jqueryUI 对话框尝试了同样的事情并遇到了同样的问题。我想要一个解释。谢谢！

4

1 回答 1

1

欢迎使用 JavaScript。您刚刚在其自然栖息地遇到了封闭。

为了使row变量按您期望的方式工作，您需要在它自己的范围内传递它。这可以使用闭包来完成。您可能想更深入地研究该主题，但现在，这里有一个解决您的问题的方法：

var totalInternships = 2;

for (var row = 1; row <= totalInternships; row++){
    var bindInternship = function(rowIndex) {
    	$("#internshipHandle" + rowIndex).click(function(e){
          e.preventDefault();
          alert('pop-up #' + rowIndex);
          //$("#internshipHidden" + rowIndex).bPopup({modalColor:"black"});
        });
    };
    bindInternship(row);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button type="button" id="internshipHandle1">pop-up 1</button>
<div id="internshipHidden1" class="hidden pop-up">

<button type="button" id="internshipHandle2">pop-up 2</button>
<div id="internshipHidden2" class="hidden pop-up">

注意：我评论了 bPopup 的行。取消注释，删除警报，您就可以开始了。

于 2016-01-20T18:07:15.050 回答