javascript - 单击同一个 div 中的 li 元素？ JQuery/JavaScript

Question

我在 div 中有三个不同的 ul 组。当用户点击 li 元素时，我想获取 id 和 data 属性值。这是我的 HTML:

     <div class="myMenu">
        <div id="groupList1">
            <fieldset>
                <legend>Group 1</legend>
                <ul>
                    <li>
                        <span id="gr1" data-code="GRVAL1">Test 1</span>
                    </li>
                    <li>
                        <span id="gr2" data-code="GRVAL2">Test 2</span>
                    </li>
                </ul>
            </fieldset>
        </div>
        <div id="groupList2">
            <fieldset>
                <legend>Group 2</legend>
                <ul>
                    <li>
                        <span id="gr3" data-code="GRVAL3">Test 3</span>
                    </li>
                    <li>
                        <span id="gr4" data-code="GRVAL4">Test 4</span>
                    </li>
                </ul>
            </fieldset>
        </div>
        <div id="groupList3">
            <fieldset>
                <legend>Group 3</legend>
                <ul>
                    <li>
                        <span id="gr5" data-code="GRVAL5">Test 5</span>
                    </li>
                </ul>
            </fieldset>
        </div>
    </div> 

我已经试过了，但我没有得到 id 或 data 属性值:

$('.myMenu ul li').on('click', function(){
    console.log($(this).prop('id'));
});

如果有人知道返回 id 或数据值的方法，请告诉我。提前致谢。

Answer 1

通过点击函数传递事件参数，然后使用 e.currentTarget 向下钻取并获取子元素 ID。

$('.myMenu ul li').on('click', function(e){
    console.log($(e.currentTarget).children().attr('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myMenu">
  <div id="groupList1">
    <fieldset>
      <legend>Group 1</legend>
      <ul>
        <li>
          <span id="gr1" data-code="GRVAL1">Test 1</span>
        </li>
        <li>
          <span id="gr2" data-code="GRVAL2">Test 2</span>
        </li>
      </ul>
    </fieldset>
  </div>
  <div id="groupList2">
    <fieldset>
      <legend>Group 2</legend>
      <ul>
        <li>
          <span id="gr3" data-code="GRVAL3">Test 3</span>
        </li>
        <li>
          <span id="gr4" data-code="GRVAL4">Test 4</span>
        </li>
      </ul>
    </fieldset>
  </div>
  <div id="groupList3">
    <fieldset>
      <legend>Group 3</legend>
      <ul>
        <li>
          <span id="gr5" data-code="GRVAL5">Test 5</span>
        </li>
      </ul>
    </fieldset>
  </div>
</div>