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

您可以使用^=运算符和属性选择器来选择元素。 ^=运算符告诉它查找“以”开头的属性，所以：

$("a[id^=comment_]").click(function(e){
   e.preventDefault();
   var hideId = $(this).attr("id").replace("comment_","");
   $("#"+hideId).slideToggle(1000);
});

因此，选择器a[id^=comment_]基本上是说选择ID为comment_的所有锚标记

Answer 2

有效选项可能是使用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);
});

将单击事件添加到php生成的元素

2 个答案: