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

Only one element can have a given 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应该始终是唯一的 ..请改用你的<a> id分类并使用.运算符。

 <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;
    });
});

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

3 个答案: