Question

您好我有以下代码：

的Javascript / jQuery的：

$(document).ready(function() {
 $(".clickMe").click(function() {
  $(".textBox").toggle();
 });
});

使用for循环打印的Html代码：

<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled</div>

<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 2</div>

<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 3</div>

我希望能够：

当页面加载时，我想要隐藏并在点击时切换。
使用<a class="clickMe">和<div class="textBox">的相同ID可以切换或隐藏正确/等效的<div>元素。

jsFiddle代码：

http://jsfiddle.net/A7Sm4/3/

由于

编辑1：类而不是ID
编辑2：修正了jsfiddle链接

Answer 1

id应该是唯一

您应该使用class来执行此操作

[编辑] 更新了jsfiddle，以适应Marko Dumic的解决方案：http://jsfiddle.net/SugvH/

Answer 2

这样的事情可以解决问题：

$(document).ready(function() {
    var divs = [];
    $(".textBox").each(function(index) {
        divs[index] = this;
    });
    $(".clickMe").each(function(index) {
        $(this).click(function() {
            $(divs[index]).toggle();
        });
    });
});

Answer 3

ID 必须（根据规范）在页面上是唯一的。您可以轻松地将其重写为使用class属性：

<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled</div>

<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 2</div>

...

最初，您需要在div.textBox准备就绪时隐藏DOM，或者使用CSS隐藏它。

然后将点击处理程序附加到a.clickMe：

$(function () {
    $('a.clickMe').click(function () {
        // find first of following DIV siblings 
        // with class "textBox" and toggle it
        $(this).nextAll('div.textBox:first').toggle();
    });
});

然而，也许你没有控制标记但是迫切需要这样做，你可以保持你的标记，并且仍然可以使它工作，因为jQuery使用Sizzle框架来查询可以强制执行的DOM document.getElementById()的限制（只返回一个元素）。

E.g。假设您使用id而不是class，如果您编写$('#clickMe')，您将只获得一个元素的jQuery集合（jQuery内部使用.getElementById()来查找元素），但是如果你写$('#clickMe')，你会得到id设置为“clickMe”的所有元素的集合。这是因为jQuery使用document.getElementsByTagName('a')来查找所有锚点，然后过滤掉属性值不是“clickMe”的元素（通过迭代和测试每个元素）。

在这种情况下（您使用了原始标记），此代码将起作用：

$(function () {
    $('a#clickMe').click(function () {
        $(this).nextAll('div#textBox:first').toggle();
    });
});

同样，除非你绝对需要，否则不要这样做！

Answer 4

尝试为每对/ div的id附加一个索引（clickme1和textbox1等）。然后，当单击a时，读取id，将索引放在末尾，并显示/隐藏具有相同索引的文本框。

Answer 5

$(document).ready(function() {
$("a").click(function() {
  $(this).parent().find("div").toggle();
});
});

使用类似的东西。

使用相同的div来切换页面的不同部分

5 个答案: