正文 

当前位置： 首页 > 知识 >

在下拉菜单中针对特定选择器 jquery 的问题

     2023-05-09     150

关键词：

【中文标题】在下拉菜单中针对特定选择器 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 解析 JSON

】在下拉列表中使用Jquery解析JSON【英文标题】：ParsingJSONusingJqueryindropdowns【发布时间】：2019-06-2006:41:13【问题描述】：我正在使用下拉菜单构建一个特定的位置选择器。我需要3个下拉菜单。现在我得到了json并尝试相应地解析它... 查看详情

jquery日期选择器，但日月和年在单独的下拉列表中

】jquery日期选择器，但日月和年在单独的下拉列表中【英文标题】：jquerydatepickerbutdaymonthandyearinseparatedropdowns【发布时间】：2012-06-0806:05:57【问题描述】：我正在开发一个jquery日期选择器。我需要选择一个日期，但在从日历中选... 查看详情

使用 AJAX 选择下拉菜单选择器时遇到问题

】使用AJAX选择下拉菜单选择器时遇到问题【英文标题】：Troubleselectingdrop-downmenuselectorusingAJAX【发布时间】：2021-11-1905:15:08【问题描述】：目前，我正在尝试创建一个页面，在该页面中，我的数据库会在放置事件时更新。更具体... 查看详情

如何使用 javascript/jquery 在选择下拉菜单中启用/禁用引导选项

】如何使用javascript/jquery在选择下拉菜单中启用/禁用引导选项【英文标题】：Howtoenable/disablebootstrapoptioninselectdropdownusingjavascript/jquery【发布时间】：2020-08-3008:30:46【问题描述】：我正在尝试禁用特定选项。这是我的代码<selectid... 查看详情

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

】如何在同一页面上使用引导程序和jquery下拉菜单【英文标题】：Howtousebootstrapandjquerydropdownonsamepage【发布时间】：2012-10-1710:03:52【问题描述】：我想使用引导日期和时间选择器，我已经使用文件“jquery.dropdown.js”在我的页面中... 查看详情

是否有针对 IE10 的特定 CSS 选择器？

】是否有针对IE10的特定CSS选择器？【英文标题】：AreThereSpecificCSSSelectorsTargetingIE10?【发布时间】：2011-11-1108:59:42【问题描述】：由于IE在版本10中摆脱了条件cmets，我迫切需要找到专门针对IE10的“CSShack”。请注意，被“黑”的必... 查看详情

当用户从日期选择器中选择日期时，如何在下拉列表中获取特定的星期几？

】当用户从日期选择器中选择日期时，如何在下拉列表中获取特定的星期几？【英文标题】：Howtogettheparticaulardayofweekinadropdownwhentheuserselectsadatefromdatepicker?【发布时间】：2012-09-0410:40:55【问题描述】：当用户从日期选择器中选择... 查看详情

jquery依赖下拉菜单选择

】jquery依赖下拉菜单选择【英文标题】：Jquerydependentdrop-downmenuselect【发布时间】：2019-04-2307:17:17【问题描述】：对不起，我的英语很差。我无法从jquery相关的下拉菜单中选择选项值。我有三个下拉菜单第一个类别，第二个是子... 查看详情

引导按钮下拉菜单中的引导日期选择器

】引导按钮下拉菜单中的引导日期选择器【英文标题】：Bootstrapdatepickerinbootstrapbuttondropdown【发布时间】：2013-07-0301:47:09【问题描述】：我的要求：我正在开发一个twitter引导按钮下拉菜单(http://twitter.github.io/bootstrap/components.html#bu... 查看详情

JQuery UI Datepicker，在下拉菜单中颠倒年份的顺序

】JQueryUIDatepicker，在下拉菜单中颠倒年份的顺序【英文标题】：JQueryUIDatepicker,reversetheorderoftheyearinthedropdowns【发布时间】：2010-12-0808:52:47【问题描述】：我有一个带有changeyear:true的日期选择器。“年份”下拉菜单将标题显示为200... 查看详情

jquery ui 选择菜单自动填充

...:31【问题描述】：我已通过jqueryuiselectmenu将选择框转换为下拉菜单。我的问题是，当我自动填充数据时，下拉菜单不会自动填充。只有当我在菜单下拉时按下每个选择框时，选择器才会选择正确的选项。但我需要自动完成。我怎... 查看详情

jQuery - 如何使用选择器在表格中查找特定单元格？

】jQuery-如何使用选择器在表格中查找特定单元格？【英文标题】：jQuery-howtofindspecificcellinatableusingselectors?【发布时间】：2014-11-1415:22:48【问题描述】：鉴于每个单元格都有row,col属性。我试过类似的东西$(#mytabletrtdrow=1col=1)但它不... 查看详情

jquery在下拉菜单中找到所选项目的值

】jquery在下拉菜单中找到所选项目的值【英文标题】：jqueryfindvalueofselecteditemindropdownwithatwist【发布时间】：2011-08-3109:41:20【问题描述】：我有一个下拉列表显示选择标签中的值，我通常只使用$(\'#ID\').val()来获取值，但ID是未知... 查看详情

选择特定的下拉菜单项后，下拉按钮的值不会改变

】选择特定的下拉菜单项后，下拉按钮的值不会改变【英文标题】：Dropdownbuttonvaluedoesnotchangeuponselectingaparticulardropdownmenuitem【发布时间】：2022-01-2207:07:18【问题描述】：我目前在我的Angular项目中使用bootstrapv4.5，每当我点击下拉... 查看详情

如何在 ReactJS 中使用特定值制作下拉菜单？

】如何在ReactJS中使用特定值制作下拉菜单？【英文标题】：HowtomakeaDropdownwithspecificvaluesinReactJS?【发布时间】：2018-12-1113:01:09【问题描述】：我正在使用PrimeReact的Dropdown。我有这个代码，但在Dropdown中我只能显示label而不是name。... 查看详情

WordPress - 针对特定页面上的特定 CSS 选择器

】WordPress-针对特定页面上的特定CSS选择器【英文标题】：WordPress-TargettingaspecificCSSselectoronaspecificpage【发布时间】：2014-06-1419:58:53【问题描述】：我想要定位一个CSS选择器，但只针对一个特定页面。通常我会这样写：.page-id-70atext... 查看详情

有没有办法在 C# 中针对 XML/HTML 使用 JQuery 样式选择器？

】有没有办法在C#中针对XML/HTML使用JQuery样式选择器？【英文标题】：IsthereawaytouseJQuerystyleselectorsagainstXML/HTMLinC#?【发布时间】：2013-04-2016:15:36【问题描述】：我需要一种从XML中选择节点的基于字符串的方法我知道XPATH，我正在寻... 查看详情

jquery 在单击单选按钮时选择并激活特定类的所有项目

...正在为客户定制产品以创建表单。表单对象（文本字段、下拉菜单等）出现在菜单 查看详情