Question

我已经构建了一个简单的下拉菜单来替换一些html选择菜单，如下所示：

$('html, .currentPage').click(function() { 
    $('.currentMenu').slideUp('fast'); 
});

$('.currentPage').click(function(e){        
    if(!$(this).next().is(":visible")) { 
        $(this).next().stop().slideDown('fast'); 
    }
    e.stopPropagation(); 
});

$(".currentMenu li").click(function(e){
  e.preventDefault();
  $(".currentPage").html($(this).text());
});

但是，如果我有多个菜单，最后一部分：

$(".currentMenu li").click(function(e){
  e.preventDefault();
  $(".currentPage").html($(this).text());
});

将出现在两个菜单上。如何仅针对该特定菜单定位“.currentPage”类？

HTML：

                        <div class="menuWrap font">
                            <div class="currentPage">Trebuchet MS</div>
                            <div class="currentMenu">
                              <ul>
                                <li>Arial</li>
                                <li>Helvetica</li>
                                <li>Droid Sans</li>
                                <li>Trebuchet MS</li>
                                <li>Georgia</li>
                                <li>Droid Serif</li>
                              </ul>
                            </div>
                        </div>


                        <div class="menuWrap fontSize">
                            <div class="currentPage">12pt</div>
                            <div class="currentMenu">
                              <ul>
                                <li>9pt</li>
                                <li>10pt</li>
                                <li>11pt</li>
                                <li>12pt</li>
                                <li>13pt</li>
                              </ul>
                            </div>
                        </div>

Answer 1

好的，根据您更新的问题。 .currentMenu和.currentPage是兄弟姐妹。因此，您可以导航到父元素，然后向下钻取到currentPage。这是一个小提琴：http://jsfiddle.net/DuPuJ/

Answer 2

您有两种选择。第一种是遍历DOM以查找.currentPage中最近的.currentMenu li元素。鉴于您的HTML结构，这应该有效：

$(".currentMenu li").click(function(e){
    e.preventDefault();
    $(this).closest(".currentMenu").prev().html($(this).text());
});

第二个选项是将此代码放入一个应用于元素的插件中，因此您始终知道在其中选择元素的上下文。

在jQuery中定位上面（this）的多个类？

2 个答案: