在下拉菜单中针对特定选择器 jquery 的问题
Posted
技术标签:
【中文标题】在下拉菜单中针对特定选择器 jquery 的问题【英文标题】:Issue targeting specific selector jquery in dropdwon menu 【发布时间】:2015-06-05 08:06:56 【问题描述】:我有一个带有 jquery 的下拉菜单,我想根据下拉菜单中选择的内容以不同的方式修改一些文本。
下拉菜单有效。
html代码:
<div>
<ul class="myMenu">
<li><a href="#">Choose your location</a>
<ul>
<li id="op1"><a href="#Co">option1</a></li>
<li id="op2"><a href="#Nk">option2</a></li>
<li id="op2"><a href="#So">option3</a></li>
</ul>
</li>
</ul>
</div>
<div>
<h1 id="text_to_change">Welcome to blabla</h1>
</div>
javascript 代码:
$(document).ready(function()
$('.myMenu li ul li').click( function(event)
$(document).find('#text_to_change').css('visibility', 'visible');
$('.myMenu').hide();
if ($(this) == '#op1')
$('#text_to_change').text("text changed");
if ($(this) == '#op2')
$('#text_to_change').text("text changed differently");
else
$('#text_to_change').text("text changed differently again");
);
);
为什么($(this) == '#op1')
不起作用?
【问题讨论】:
==
是算术比较。我想你需要===
来比较两个字符串?
【参考方案1】:
您正在尝试将 jquery 对象 $(this)
与字符串 #op1
进行比较
要获取元素的 id,请使用:
$(this).attr('id');
它会给你没有#
的元素的id
另外我认为你的第二个如果需要是else if ...
$(document).ready(function()
$('.myMenu li ul li').click( function(event)
console.log($(this).attr('id'), $(this).prop('id'));
$(document).find('#text_to_change').css('visibility', 'visible');
$('.myMenu').hide();
if ($(this).attr('id') == 'op1')
$('#text_to_change').text("text changed");
else if ($(this).attr('id') == 'op2')
$('#text_to_change').text("text changed differently");
else
$('#text_to_change').text("text changed differently again");
);
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
<ul class="myMenu">
<li><a href="#">Choose your location</a>
<ul>
<li id="op1"><a href="#Co">option1</a></li>
<li id="op2"><a href="#Nk">option2</a></li>
<li id="op2"><a href="#So">option3</a></li>
</ul>
</li>
</ul>
</div>
<div>
<h1 id="text_to_change">Welcome to blabla</h1>
</div>
【讨论】:
非常感谢...我在这上面卡了太久了。【参考方案2】:这两个项目不能共享相同的 id 'op2'
<li id="op2"><a href="#Nk">option2</a></li>
<li id="op2"><a href="#So">option3</a></li>
【讨论】:
以上是关于在下拉菜单中针对特定选择器 jquery 的问题的主要内容,如果未能解决你的问题,请参考以下文章