Question

我的计划是有很多盒子（未定义的数量）。当在框下单击显示框时，它会显示该特定框。

我的html中有一些独特的div。 div通过以下方式独特：

<div id="box-<%=box.id%>"></div>

在我的application.js中，我有

$('.show-box > a').click(function(){
$('#box').show();
});

我显然需要在$('#box').show();部分使用box-id，但我不确定该怎么做...

编辑：添加更多信息

<div class="show-box">
  <a href="javascript:void(0)">Show</a>
</div>

<div class="box" id="box-<%= box.id  %>"></div>

该课程用于造型。

添加，我知道javascript链接应链接到实际链接。我稍后会解决这个问题。

Answer 1

简单的方法是在id之后命名你的box id，或者在a中写下另一个属性。例如，如果您的标签的ID是“anchor1”，则为相应的div分配id“box-anchor1”。然后，像这样引用它：

$('.show-box > a').click(function(){ 
$('#box' + this.attr('id')).show(); 
});

Answer 2

您可以在处理程序中使用this来引用所点击的特定.show-box > a。

所以它取决于它与你想要显示的box元素之间的关系。

当你在下说时，如果这意味着它是.show-box元素的兄弟，你可以use .parent()从<a>遍历，然后use .prev()遍历box。

$('.show-box > a').click(function() { // "this" refers to the <a> that was clicked. $(this).parent().prev().show(); });

最终，正确的解决方案取决于您的实际HTML标记。如果您在问题中提供，那将会有所帮助。

您可以根据需要选择ID，但通常不需要。

Answer 3

如果框和显示它的链接在逻辑上相关，您可以使用以下内容跳过整个唯一ID业务：

<强> HTML

<div class="container">
  <div class="box">
    <!-- stuff in the box -->
  </div>
  <a href="#">Show</a>
</div>

<强>的jQuery

$("div.container a").click(function() {
  $(this).prev().show(); // prev() will get the div.box element.
});

另一方面，如果它们在结构上不相关，您可以使用URL的片段部分来引用框ID：

<强> HTML

<div>
    <div class="box" id="box-1">...</div>
    <div class="box" id="box-2">...</div>
</div>

<div>
    <a class="boxtoggler" href="#box-1">Show Box 1</a>
    <a class="boxtoggler" href="#box-2">Show Box 2</a>
</div>

<强>的jQuery

$("a.boxtoggler").click(function() {
    var boxId = $(this).attr("href");
    $(boxId).show();
});

请注意我们如何滥用URL的片段部分前面有一个#字符以使其成为css ID;）

Answer 4

我不确定我理解你的问题，但是如果你想要显示点击的框：

$('.show-box > a').click(function(){
$(this).parents('.show-box').show();
});

告诉jQuery哪个（独特的）div来做一个动作

4 个答案: