有沒有更好的方式來選擇JQuery中的這些元素？

Question

我有一個菜單，有一些子菜單項，我想當我選擇某個子菜單項時，更改系統的主標籤。例如，對於菜單1的項目1將標籤更改爲「系統A」，對於菜單2的項目1將標籤更改爲「系統B」。

Here's的代碼，但doesn't工作以及..

$(document).ready(function() { 
 

 
    $('#choiceA ul li ul li a').click(function() { 
 
    // change label to System A 
 
    $('#labelSystem').html('System A'); 
 
    }); 
 

 
    $('#choiceB ul li ul li a').click(function() { 
 
    // change label to System B 
 
    $('#labelSystem').html('System B'); 
 
    }); 
 

 
});

<table cellspacing="0" cellpadding="0" border="0" width="100%"> 
 
    <tr> 
 
    <td> 
 
     <span class="htitulo">System - <div id="labelSystem"></div></span> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<div id="menu"> 
 
    <ul> 
 
    <li id="choiceA"><a href="#">Menu1</a> 
 
     <ul> 
 
     <li><a href="#">Submenu 1</a> 
 
     </li> 
 
     <li><a href="#">Submenu 2</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li id="choiceB"><a href="#">Menu2</a> 
 
     <ul> 
 
     <li><a href="">Submenu 1</a> 
 
      <ul> 
 
      <li><a id="option1" href="">Submenu 1-1</a> 
 
      </li> 
 
      <li><a id="option2" href="">Submenu 1-2</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Submenu 2</a> 
 
      <ul> 
 
      <li><a id="option3" href="">Submenu 2-1</a> 
 
      </li> 
 
      <li><a id="option4" href="">Submenu 2-2</a> 
 
      </li> 
 
      <li><a id="option5" href="">Submenu 2-3</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Here's小提琴爲...

https://jsfiddle.net/L2xd9jeu/

Answer 1

使用OP給出的例子，我會這樣做：

$(document).ready(function() { 
    $('#choiceA li:first-child a').click(function() { 
     // change label to System A 
     $('#labelSystem').text('System A');   
    }); 
    $('#choiceB li:first-child a').click(function() { 
     // change label to System B 
     $('#labelSystem').text('System B'); 
    }); 
}); 

這是更新的fiddle。