Использование jQuery впервые, простая проблема!

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

Во-первых, числовые идентификаторы не являются действительными 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, он дополнительно переместит фокус в нужное место.

После щелчка можно просто взять ссылку на ссылку:

$(document).ready(function(){

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

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

    });

});

Answer 2

Вам не нужны идентификаторы! Попробуйте это:

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

Answer 3

Переменные внутри двойных строк не анализируются, как в 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 4

Ну, я не вижу ни одного элемента с идентификатором maincontent в указанном коде. Так или иначе. Я вижу эту строку в вашем коде

$("id").click

Почему двойные кавычки, если вы хотите получить доступ к переменной?