2

我有一个菜单 - 每个菜单项都有一个类名。当我单击菜单项时，我正在使用 JQuery 查找具有匹配 ID 名称的 div。问题是搜索并不严格。如果某些东西有一个像 elo-1 这样的类名，并且我有 div ID 名称 elo-1 和 elo-11，那么就没有办法（我这样做的方式）只得到 elo-1。

我想得到一个完全匹配的。我想点击elo-1，只得到elo-1，而不是elo-1、elo-11、elo-12等。有人有什么想法吗？

这是我正在使用的代码：

        $(document).ready(function() {

    var myLayoutId = $(this).attr("layoutId");


    $("#start_page").show().siblings().hide();
    $("#navBar").hide();
    $("#refs").hide();

    $("li").click(function() {
        var thisID = $(this).attr("class");
        $("#mainBdy div:#"+thisID).show().siblings().hide();
        $('#mainBdy div[id^="'+thisID+'"]').show();


        $("#mainBdy div:#"+thisID).css("width","30%");
        $("#mainBdy div:#"+thisID).css("margin-left","-80px");
        $("#mainBdy div:#"+thisID).css("margin-top","-50px");
        $("#mainBdy div:#"+thisID).css("float","left");


    });


    $("#start_page_accept").click(function() {
        $("#navBar").show();
        $("#refs").show();
        $("#start_page").hide().next().show();
    });

    $("#menu").collapsible({
        effect: "slide",             // The effect to use when expanding and collapsing the menu. 
        initialCollapse: true       // When true, collapses the menu when the page loads.
    });

});
4

2 回答 2

7

替换这个：

    $("#mainBdy div:#"+thisID).show().siblings().hide();
    $('#mainBdy div[id^="'+thisID+'"]').show();


    $("#mainBdy div:#"+thisID).css("width","30%");
    $("#mainBdy div:#"+thisID).css("margin-left","-80px");
    $("#mainBdy div:#"+thisID).css("margin-top","-50px");
    $("#mainBdy div:#"+thisID).css("float","left");

有了这个：

$('#' + thisID).show().css({
    'width': '30%',
    'margin-left': '-80px',
    'margin-top': '-50px',
    'float': 'left'
}).siblings().hide();

几点注意事项：

  • jQuery 中的链接非常强大，如果您要对同一个元素执行多项操作，可以避免重新查询 DOM。您同样可以存储 jQuery 搜索的结果，执行类似的var $div = $('#' + thisID);操作 - 在任何一种情况下，您都不想一遍又一遍地执行相同的选择器。
  • ID 在文档中应该是唯一的，所以我假设文档中只有一个 ID 为“elo-1”的元素。如果这是真的，它应该是这样的，做一个复杂的选择器'#mainBdy div[id^="'+thisID+'"]'只是阻止 jQuery 能够使用原生的getElementById，这是一个更有效的倍数（更不用说更清洁了）。
  • 如您所见，css接受一个对象，因此您不必多次调用它。我个人会简单地向菜单项添加一个类并在我的样式表中处理样式。从可维护性的角度来看，这要容易得多。
于 2012-11-26T15:42:26.573 回答
6

修改您的选择器以避免开始匹配：

$('#mainBdy div[id^="'+thisID+'"]').show();

这匹配以您的值开头的任何内容，这不是您想要的：

$('#mainBdy div[id="'+thisID+'"]').show();

这仅匹配 id 属性等于您的值的那些项目。

附加建议

另请注意，您正在绑定到单个列表项：

$("li").click();

这可能会成为您的应用程序的任务，因为您正在为页面上的每个新列表项添加事件处理程序。事件委托是一种更好的方法，它包括向祖先元素添加一个事件处理程序，使用事件冒泡来响应嵌套项上的事件。

<ul id="list">
    <li class="edo-1">Edoine Mashlup</li>
</ul>

假设这是我们的标记（另外 100 个列表项作为衡量标准），以下将是我们的事件委托指令：

$("#list").on("click", "li", function () {
    $("#" + this.className).show().css({
        width:      '30%',
        marginLeft: '-80px',
        marginTop:  '-50px',
        float:      'left'
    })
    .siblings().hide();
});

每当在我们的元素上或在我们的元素内发生点击事件时#list，我们将评估目标（接收点击的元素）是否与我们的选择器匹配li。如果是，我们触发我们的函数 - 否则，我们忽略它并让它在 DOM 中冒泡。

于 2012-11-26T15:42:20.917 回答