點擊同一個div中的li元素？ JQuery/JavaScript

Question

我有三個不同的ul組裏面的div。我想在用戶點擊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或數據屬性值：

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

Answer 2

以下適用於記錄的ID。如果您想獲取數據屬性，只需將.id替換爲.dataset.code - 您的.myMenu類現在拼寫錯誤，因此您首先必須解決該問題。然後，你正在尋找獲取李的範圍內的數據，所以我只是訪問它。

$('.myMenu ul li').on('click', function(){ 
    console.log($(this)[0].children[0].id); 
}); 

工作斌：

http://jsbin.com/yinitirawi/edit?html,js,output

Answer 3

如果想拿到「身份證」和「數據代碼」屬性，然後再看看這個，

讓每一個「裏的屬性值「您需要指定」span「標籤以獲取正確的屬性值。使用下面的jquery代碼。

$(function(){ 
     $('.myMenu ul li span').on('click',function(){ 
      console.log($(this).attr('id')+", "+$(this).attr('data-code')); 
     }); 
    }); 

Answer 4

您可以使用此：

$(document).ready(function(){ 
    $('li').click(function(){ 
    var id = $(this).children().attr('id'); 
    var data = $(this).children().attr('data-code'); 
    }); 
}); 

然後用id和data無論你想。

http://jsbin.com/lixodoyuha/edit?html,js,output