Javascript 如何在jQuery中设置元素父元素的父元素的text()?
我正在jQuery中构建一个自定义下拉菜单。 现在我想将A.select元素的文本设置为单击的元素的文本。但我不能让它工作 这是html:Javascript 如何在jQuery中设置元素父元素的父元素的text()?,javascript,jquery,selector,parent,Javascript,Jquery,Selector,Parent,我正在jQuery中构建一个自定义下拉菜单。 现在我想将A.select元素的文本设置为单击的元素的文本。但我不能让它工作 这是html: <div class="pulldown"> <a href="javascript:;" class="select">All cats/subs</a> <div class="options"> <a href="javascript:;">Option one A&
<div class="pulldown">
<a href="javascript:;" class="select">All cats/subs</a>
<div class="options">
<a href="javascript:;">Option one A</a>
<a href="javascript:;">Option two A</a>
<a href="javascript:;">Option three A</a>
<a href="javascript:;">Option four A</a>
</div>
</div>
这里缺少什么?您应该为整个div设置一个全局变量,并将其用作引用
$(document).ready(function() {
/*Grab the div into a variable*/
var Pulldown = $('div.pulldown');
/*Set up your event handlers*/
$('.options a', Pulldown).click(function(){
var value = $(this).text();
$('.select',Pulldown).html(value);
});
/*Toggle the pulldown*/
Pulldown.toggle(function() {
Pulldown.css('z-index','110');
$('.options', Pulldown).css('z-index','100').show('fast');
}, function(){
Pulldown.css('z-index','10');
$('.options', Pulldown).css('z-index','0').hide('fast');
});
});
现场示例如下:
如果您稍微清理一下HTML,使用起来会更容易:
<dl class="menu">
<dt class="topItem">All cats/subs</dt>
<dd class="subItem">Option one A</dd>
<dd class="subItem">Option two A</dd>
<dd class="subItem">Option three A</dd>
</dl>
现场演示可在以下网址找到:
注意,此示例需要扩展以处理具有多个子项的多个菜单。另外,不要用JavaScript设置CSS属性,而应该用样式表设置它们。切换函数在那里做什么?在我看来,每次切换之后,您都会设置一个新的单击处理程序。这看起来不对。您是否已将$this.text的内容转储到console.log,以确保找到正确的内容?在我看来,在开始进一步诊断问题之前,您必须回答这两个问题。但他绝对不应该为切换代码中的锚重新建立单击处理程序。谢谢@jsumners。你的代码看起来干净多了。我要试一试!
<dl class="menu">
<dt class="topItem">All cats/subs</dt>
<dd class="subItem">Option one A</dd>
<dd class="subItem">Option two A</dd>
<dd class="subItem">Option three A</dd>
</dl>
$(function() {
var $topItem = $('.topItem');
var $subItems = $('.subItem');
$topItem.bind('click', function() {
$subItems.toggle();
});
$subItems.bind('click', function() {
$topItem.text($(this).text());
$subItems.toggle();
});
});