JQuery вопрос

Question

Я использую jquery, поэтому, когда пользователь щелкает ссылку, я получаю идентификатор указанной ссылки, а затем использую его, чтобы выбрать элемент li с тем же идентификатором и анимировать его. Ну, по крайней мере, это то, что я пытаюсь сделать ... пока у меня есть:

$(function(){
        $('#slider-buttons a').click(function(){
        var x = $(this).attr('id');
        var y = $('#slider-stage-list li' + x);

        if(x == "inicio")
            $(this).animate({ "left" : "0px"},700);
        else
            $(this).animate({ "left" : (increment*3) + "px"},700);
    });
});

Я пробовал различные комбинации, но все еще не могу получить 'y', чтобы иметь значение элемента списка с тем же идентификатором, что и x (URL-адрес, по которому щелкнули) ... x действительно получает правильный идентификатор, но y все еще в лучшем случае возвращает "undefined" ... вот HTML-код, который идет вместе ...

<div id="slider-buttons">
    <a href="#" id="inicio">Inicio</a> <br />
    <a href="#" id="previous">&iquest;Qui&eacute;nes Somos?</a> <br /> 
    <a href="#" id="clases">Clases</a> <br />
    <a href="#" id="equipo">Equipo</a> <br />
    <a href="#" id="album">&Aacute;lbum</a> <br />
    <a href="#" id="especiales">Eventos Especiales</a> <br />
    <a href="#" id="#">Cont&aacute;ctanos</a> <br />
</div>
<div id="stage">
    <ul id="slider-stage-list">
        <li id="inicio">Inicio</li>
        <li id="nos">&iquest;Qui&eacute;nes Somos?</li>
        <li id="clases">Clases</li>
        <li id="equipo">Equipo</li>
        <li id="album">&Aacute;lbum</li>
        <li id="especiales">Eventos Especiales</li>
        <li id="#">Cont&aacute;ctanos</li>
    </ul>
</div>

любая помощь будет оценена =)

---

Изменить, чтобы ответить на 3 ответа

Если я сделаю что-либо из этого, я попаду в console.log (); "[Объект Объект]" = /

---

Редактировать ответ БК

Спасибо за исправление HTML, все же, если я запишу код, который вы дали мне для jquery, я все равно получу в console.log (); "[объект Объект]"

---

Изменить, потому что я не получил последний ответ

Если я попробую такой подход, я либо получу «[объект объекта]», либо ничего ...

Answer 1

Нет, нет

Это недействительный HTML, потому что ваши ссылки имеют тот же идентификатор, что и элементы списка.

Ваш код должен выглядеть примерно так:

<div id="slider-buttons">
    <a href="#" id="inicio">Inicio</a> <br />
    <a href="#" id="previous">&iquest;Qui&eacute;nes Somos?</a> <br /> 
    <a href="#" id="clases">Clases</a> <br />
    <a href="#" id="equipo">Equipo</a> <br />
    <a href="#" id="album">&Aacute;lbum</a> <br />
    <a href="#" id="especiales">Eventos Especiales</a> <br />
    <a href="#" id="contactanos">Cont&aacute;ctanos</a> <br />
</div>
<div id="stage">
    <ul id="slider-stage-list">
        <li id="item_inicio">Inicio</li>
        <li id="item_previous">&iquest;Qui&eacute;nes Somos?</li>
        <li id="item_clases">Clases</li>
        <li id="item_equipo">Equipo</li>
        <li id="item_album">&Aacute;lbum</li>
        <li id="item_especiales">Eventos Especiales</li>
        <li id="item_contactanos">Cont&aacute;ctanos</li>
    </ul>
</div>

и

$(function(){
        $('#slider-buttons a').click(function(){
        var x = $(this).attr('id');
        var y = $('li#item_' + x);

        if(x == "inicio")
                $(this).animate({ "left" : "0px"},700);
        else
                $(this).animate({ "left" : (increment*3) + "px"},700);
    });
});

Answer 2

var y = $('#slider-stage-list li' + x);

Должно быть

var y = $('#slider-stage-list li#' + x);
// or
var y = $('#' + x);
// or
var y = $(this);

Третий упомянутый вариант, вероятно, лучше.

Однако у вас есть проблема: ваши id не уникальны. Это может быть то, что вы ищете (без изменений в вашем HTML):

var y = $('#slider-stage-list li').filter(function() {
    return $(this).attr('id') == x;
});

Answer 3

Мне кажется, вам не хватает знака фунта для использования селектора идентификаторов. Попробуйте это:

    var x = $(this).attr('id');
    var y = $('#slider-stage-list li#' + x); // Note the 'li#' instead of just 'li'.