有没有更好的方法在Jquery中选择这些元素？

Question

我有一个菜单，包含一些子菜单项，我想在选择一些子菜单项时，更改系统的主标签。例如，对于菜单1的项目1，将标签更改为“系统A”，对于菜单2的项目1，将标签更改为“系统B”。

这是代码，但效果不好..

$(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>

这是小提琴......

https://jsfiddle.net/L2xd9jeu/

Answer 1

使用OP给出的示例，这是我要做的：

println()

以下是更新后的fiddle。