jQuery 问题答案

【问题标题】：jQuery questionjQuery 问题
【发布时间】：2009-03-15 03:28:59
【问题描述】：

我正在使用 jquery，因此当用户单击链接时，我会获得所述链接的 id，然后使用它来选择具有相同 id 的 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 相同 id 的列表项的值（点击的 url）...x 确实获得了正确的 id 但 y 仍然充其量返回“未定义”...这是随之而来的 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(); “[对象对象]” =/

修改答案 BC

感谢 HTML 更正，如果我写下你给我的 jquery 代码，我仍然会进入 console.log(); “[对象对象]”

编辑，因为我没有得到最后的回复

如果我尝试这种方法，我要么得到“[object Object]”，要么什么都没有......

【问题讨论】：

尝试将所有“编辑”作为 cmets。清理一切更多。

标签： jquery html

【解决方案1】：

不，不

这是无效的 html，因为您的链接与您的列表项共享相同的 id。

您的代码应该看起来更像这样：

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

【讨论】：

【解决方案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;
});

【讨论】：

第三个选项将是与 x 相同的元素。此外，还有冲突的 id。
@BC，冲突 ID 无论如何都会导致未定义的行为。考虑类。
@BC，啊，我明白你在做什么——你有两个不同的列表。当您为不同的元素使用相同的 ID 时，这会让人感到困惑。
@BC，很抱歉说“你”......我以为你是 OP。 xD

【解决方案3】：

我相信您在使用 ID 选择器时缺少一个井号。试试这个：

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

【讨论】：