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。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

以下用于记录ID。如果您想获取数据属性，只需将行.id替换为.dataset.code - 您的.myMenu类现在拼写错误，因此您首先必须解决这个问题。那么你是想在li的范围内获取数据，所以我只是访问了它。

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

工作箱：

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

Answer 3

如果想获得＆＃34; id＆＃34;和＆＃34;数据代码＆＃34;属性然后看看这个，

获取每个＆＃34; li＆＃34;的属性值。你需要指定＆＃34; span＆＃34;标记以及获取正确属性的值。使用以下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

点击同一div中的li元素？ JQuery的/ JavaScript的

4 个答案: