Question

我有这样的标记：

<p><a id="1" href="#">Link 1</a></p>
<p id="1show" class="starthidden">Hi! I get shown when link 1 is clicked</p>

<p><a id="2" href="#">Link 2</a></p>
<p id="2show" class="starthidden">Hi! I get shown when link 2 is clicked</p>

<p><a id="3" href="#">Link 3</a></p>
<p id="3show" class="starthidden">Hi! I get shown when link 3 is clicked</p>

还有一些像这样的javascript：

$(document).ready(function(){

    $("#maincontent a").click(function () {
        var id = '#' + $(this).attr("id");
        var show = id + 'show';

        $("id").click(function () {
            $("show").slideToggle("slow");
            return false;
        });

        return false;
    });

});

现在，id和show都是我在运行时期望的，但下一行不起作用。我猜这是$（“id”）位 - 虽然将其更改为$（id）也不起作用。

我该如何解决这个问题？

Answer 1

首先，数字ID不是有效的HTML。 ID属性必须以a-z开头。我建议像这样更改HTML：

<p><a href="#msg1">Link 1</a></p>
<p id="msg1" class="starthidden">Hi! I get shown when link 1 is clicked</p>

<p><a href="#msg2">Link 2</a></p>
<p id="msg2" class="starthidden">Hi! I get shown when link 2 is clicked</p>

<p><a href="#msg3">Link 3</a></p>
<p id="msg3" class="starthidden">Hi! I get shown when link 3 is clicked</p>

哪一个都有效且更清晰。在没有javascript / css的设备上，它还会将焦点移到正确的位置。

然后，您可以在点击发生时简单地从链接中选取href：

$(document).ready(function(){

    $("#maincontent a").click(function () {

        var id = $( this ).attr( 'href' );
        $( id ).slideToggle( 'slow' );
        return false;

    });

});

Answer 2

双字符串中的变量不会像在PHP中一样进行解析，因此您必须执行$(show)。此外，内部click()绑定是不必要的 - 您只需运行slideToggle()：

$(document).ready(function(){

    $("#maincontent a").click(function () {
        var id = '#' + $(this).attr("id");
        var show = id + 'show';

        $(show).slideToggle("slow");

        return false;
    });

});

Answer 3

你不需要ids！试试这个：

$(function(){
    $("a").click(function(){
        $(this).parents("p").slice(0,1).next("p").slideToggle("slow");
    });
});

Answer 4

好吧，我没有在列出的代码中看到任何带有ID maincontent的元素。无论如何。我在你的代码中看到了这一行

$("id").click

如果要访问变量，为什么要引用双引号？

第一次使用jQuery，简单的问题！

4 个答案: