javascript - 为 php 生成的元素添加点击事件

Question

我正在制作一个将生成 div 表格的页面。每行都有一个带有链接的单元格。单击该链接时，当前行和下一行之间的隐藏 div 将切换滑出。

链接将具有 id="clickLink_10"，隐藏的 div 将具有 id="10"和 class="hiddenDiv"。数字 10 是从数据库中的帖子 ID 生成的动态数字。

只要我对数字进行硬编码，我的动画就可以正常工作。但我想动态地将链接连接到它隐藏的 div，因为行将从数据库中获取。

下面是 html 的示例(实际情况更复杂，但这是关键部分):

<div><a href="#" id="clickLink_11">CLICK HERE</a></div>
<div class="hiddenDiv" id="11">blabla</div>

<div><a href="#" id="clickLink_1">CLICK HERE</a></div>
<div class="hiddenDiv" id="1">blabla</div>

<div><a href="#" id="clickLink_3">CLICK HERE</a></div>
<div class="hiddenDiv" id="3">blabla</div>

下面是我在 jQuery 中尝试做的事情:

hiddenDivs = $('.hiddenDiv');

for(var i = 0; i < hiddenDivs.length; i++ ) {
   $("#clickLink_" + hiddenDivs[i].id).click( function() { 
      $(hiddenDivs[i]).slideToggle(1000);
   });
}

这显然行不通。我知道我对 i 变量的处理是错误的，所以将其视为虚拟代码。非常感谢任何帮助。

Answer 1

一个有效的选项可能是使用 data- 属性。我还会更改您的数字 ID，因为只有数字不是有效的 html ID。

HTML

<div><a href="#" class="clickLink" data-hidden-id="11">CLICK HERE</a></div>
<div class="hiddenDiv" id="hidden_11">

<div><a href="#" class="clickLink" data-hidden-id="1">CLICK HERE</a></div>
<div class="hiddenDiv" id="hidden_1">

<div><a href="#" class="clickLink" data-hidden-id="3">CLICK HERE</a></div>
<div class="hiddenDiv" id="hidden_3">

JS

$(".clickLink").click( function() { 
   var hiddenDivId = "hidden_" + $(this).data("hidden-id");
   $("#" + hiddenDivId ).slideToggle(1000);
});