在dropdwon菜單中針對特定選擇器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沒有#

另外我想你的第二個如果需要是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>