jquery - JQuery - 单击链接时显示多个选择框

Question

我在 JQuery 中编写了一个小函数，花了我一点时间，但我到了那里。您单击一个链接并显示一个下拉列表。但是我需要单击链接并显示下拉列表，但是再次单击它时，我再次想要相同的下拉列表，最多为 4 个。

现在我有点坚持，这就是我走了多远。

HTML：

<a class="toggle" href="#">Add another Location</a>

插入更多位置下拉框​</p>

查询：

$(function() {
    $("a.toggle").click(function(e) {
        $(this).next().toggle();
        e.preventDefault();
    });
});​

CSS：

.toggleDiv { display: none; }
.toggle { font: 14px black Tahoma; }

任何人都可以指出正确的方向。我的 JSFiddle 在这里：

http://jsfiddle.net/Painstar/bkVNk/

谢谢！

​</p>

Answer 1

我已经更新了你发送的小提琴，我会怎么做：

jQuery

var current = 1;
$(function() {
$("a.toggle").click(function(e) {
    if(current <= 4) {
      $("#moreLocations" + current).show();
    current += 1;
    }
e.preventDefault();
 });
});

HTML

<a class="toggle" href="#">Add another Location</a>
<div id="moreLocations1" class="toggleDiv">insert more locations dropdownbox</div>
<div id="moreLocations2" class="toggleDiv">insert more locations dropdownbox</div>
<div id="moreLocations3" class="toggleDiv">insert more locations dropdownbox</div>
<div id="moreLocations4" class="toggleDiv">insert more locations dropdownbox</div>

假设您希望将 4 个盒子作为单独的项目。

您也可以将'.sibling()与 ID 一起使用，但如果您知道ID' 则应该没问题。