[英]target mutiple classes above (this) in jQuery?
I've built a simple dropdown menu to replace some html select menus like so: 我建立了一个简单的下拉菜单来替换某些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());
});
However, if I were to have more than one menu, the final part: 但是,如果要使用多个菜单,则最后一部分:
$(".currentMenu li").click(function(e){
e.preventDefault();
$(".currentPage").html($(this).text());
});
will occur on both menus. 在两个菜单上都会出现。 How can I target the ".currentPage" class for that specific menu only?
如何仅将特定菜单的“ .currentPage”类作为目标?
HTML: 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>
OK, based on your updated question. 确定,根据您更新的问题。 .currentMenu and .currentPage are siblings.
.currentMenu和.currentPage是同级。 So you can navigate to the parent element, then drill down to the currentPage.
因此,您可以导航到父元素,然后向下钻取到currentPage。 Here's a fiddle: http://jsfiddle.net/DuPuJ/
这是一个小提琴: http : //jsfiddle.net/DuPuJ/
You have two options. 您有两个选择。 The first is to traverse the DOM to find the nearest
.currentPage
element from .currentMenu li
. 首先是遍历DOM,以从
.currentMenu li
找到最近的.currentPage
元素。 Given your HTML structure, this should work: 给定您的HTML结构,这应该可以工作:
$(".currentMenu li").click(function(e){
e.preventDefault();
$(this).closest(".currentMenu").prev().html($(this).text());
});
The second option is to put this code into a plugin which you apply to an element, so you always know the context in which to select elements in. 第二种选择是将这段代码放入您应用于元素的插件中,因此您始终知道在其中选择元素的上下文。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.