Question

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

});

Answer 1

替换它：

    $("#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，这是一个更有效的运行时间（更不用说清洁）了。 / LI>
如您所见，css接受一个对象，因此您不必多次调用它。我个人只需在菜单项中添加一个类，并在样式表中处理样式。从可维护性的角度来看，它要容易得多。

Answer 2

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

$('#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();
});

任何时候发生点击事件 on ，我们的#list元素，我们将评估目标（接收点击的元素）是否与我们匹配选择器li。如果是这样，我们会触发我们的功能 - 否则，我们会忽略它并让它冒出来。

使用另一个元素的className按ID查找元素

2 个答案:

其他建议