jquery - JQuery 效果仅适用于第一个元素

Question

我编写了这个简单的脚本（我现在正在学习 Javascript 和 JQuery）：

$(document).ready(function () {

    $("#lnkCollapse").click(function () {
        $("#contentArea").slideToggle("slow");
        return false;
    });
});

在我的页面中，我有一些标签 A href，我添加了 id=lnkCollapse。

<a  id="lnkCollapse" href="#" class="circle">
     <h3>Some title</h3>
</a>

问题是该脚本仅适用于 html 中的第一个 href，而不适用于其他 .. 为什么会这样？另外，如果我更改 id="lnkCollapse" 的位置

<a   href="#" class="circle" id="lnkCollapse">
     <h3>Some title</h3>
</a>

该脚本根本没有应用。多谢！

Answer 1

只有一个元素可以具有给定的 id。使用类而不是 id ：

<a href="#" class="circle lnkCollapse">
     <h3>Some title</h3>
</a>

$(document).ready(function () {
    $(".lnkCollapse").click(function () {
        $("#contentArea").slideToggle("slow");
        return false;
    });
});

Answer 2

让我猜猜...您有多个<a>具有相同 id 的元素 .. id 应该始终是唯一的.. 改用 class .. 将您的<a>id 更改为 class 并使用.运算符。

 <a  class="lnkCollapse" href="#" class="circle"> 
 //--^^^^^---here

 $(".lnkCollapse").click(function () {
 //-^--here

Answer 3

使用此 HTML

<a   href="#" class="circle lnkCollapse" id="lnkCollapse1">
 <h3>Some title</h3>
</a>

<a  id="lnkCollapse2" href="#" class="circle lnkCollapse">
 <h3>Some title</h3>
</a>

使用这个 javascript

$(document).ready(function () {

$(".lnkCollapse").click(function () {
    $("#contentArea").slideToggle("slow");
    return false;
    });
});