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

Question

我有一个带有 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') 不起作用？

Answer 1

您正在尝试将 jquery 对象 $(this) 与字符串 #op1

进行比较

要获取元素的 ID，请使用：

$(this).attr('id');

它将为您提供没有 #

的元素的 ID

另外我认为你的第二个 if 需要是 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>

Answer 2

这两个项目不能共享相同的 id 'op2'

<li id="op2"><a href="#Nk">option2</a></li>
<li id="op2"><a href="#So">option3</a></li>

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

Issue targeting specific selector jquery in dropdwon menu

javascript

jquery

drop-down-menu

jquery-selectors

this