目標在jQuery中的多個類（this）？

我已經建立了一個簡單的下拉菜單來代替某些HTML選擇菜單，如下所示：目標在jQuery中的多個類（this）？

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

來源

2012-02-28 tctc91

。我已經更新了我的答案，因爲您已經發布了您的HTML。 – 2012-02-28 13:07:32

你有兩個選擇。第一種是遍歷DOM以從.currentMenu li中找到最近的.currentPage元素。鑑於你的HTML結構，這應該工作：

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

第二個選項是把這個代碼到你申請一個元素的插件，讓你隨時知道這在選擇元素上下文

來源

2012-02-28 12:59:24

@HackedByChinese提供了最簡單的解決方案，但您提供了更好的解決方案。無論是通過jQuery插件還是實例化類，都應該在這裏完成某種封裝。但是，在這一點上，這可能會讓OP有點進步。 – maxedison 2012-02-28 13:01:57

優秀。總是最能吸引我的東西。謝謝！ – tctc91 2012-02-28 13:08:04

OK，根據您的更新問題。 .currentMenu和.currentPage是兄弟姐妹。所以你可以導航到父元素，然後深入到當前頁面。這裏有一個小提琴：http://jsfiddle.net/DuPuJ/

來源

2012-02-28 12:58:46 HackedByChinese

嗯，它似乎沒有迴應這種變化？你介意把它發佈在JS小提琴上嗎？謝謝 – tctc91 2012-02-28 13:05:26

好的，這改變了一點。以下是樣本更新的答案。 – HackedByChinese 2012-02-28 13:14:34

目標在jQuery中的多個類（this）？

回答

相關問題