javascript - 在 jQuery 中定位上面的多个类(this)？

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

你有两个选择。第一个是遍历 DOM，从 .currentMenu li 中查找最近的 .currentPage 元素。鉴于您的 HTML 结构，这应该可行:

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

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