在下拉菜单中针对特定选择器 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 的问题的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Jquery Date Picker 中添加请选择月份年份下拉菜单的选项?

在下拉列表中使用 Jquery 解析 JSON

jquery ui 选择菜单自动填充

jquery依赖下拉菜单选择

jQuery 颜色 **Swatch** 选择器

如何在同一页面上使用引导程序和 jquery 下拉菜单