jquery - 使用另一个元素的className通过ID查找元素

我有一个菜单-每个菜单项都有一个类名。当我单击菜单项时，我正在使用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.
    });

});

最佳答案

修改选择器，避免以匹配开头：

$('#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。

关于jquery - 使用另一个元素的className通过ID查找元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13568106/