Question

我们有一个动态构建在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"});
    });
}

我们显然将实习手柄的所有链接到 last internshipHidden。我错过了什么？有没有更好的方法从动态创建的css隐藏div中制作模态窗口（也就是说，在骨架框架内？我真的不想重新开始使用bs。）

DreamWeaver对我将功能放入循环感到不满意，但所有很酷的孩子都告诉我不要听它。

编辑：使用jqueryUI对话框尝试相同的操作并遇到同样的问题。我喜欢解释。谢谢！

Answer 1

欢迎使用Javascript。你刚刚在它的自然栖息地遇到了一个封闭。

为了让row变量按照您期望的方式工作，您需要在自己的范围内传递它。这可以使用闭合来完成。 You may want to dig deeper into that topic，但就目前而言，这是解决问题的方法：

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的行。取消注释，删除警报，你就可以了。

可以动态分配bPopup触发器和目标div吗？

1 个答案: