如何获取li标签当中的data-id的值了？

Question

当点击加入购物车或立即购买时获取到口味、包装的选中的data-id值了？<div class="theme-options"> <div class="cart-title">口味</div>   <ul>                                                   <li class="sku-line selected" id="taste" data-id="1">原味</li>    <li class="sku-line" id="taste" data-id="2">黑糖</li>   </ul> </div><div class="theme-options">   <div class="cart-title">包装</div>      <ul id="test">       <li class="sku-line selected" data-id="1">单人份<i></i></li>       <li class="sku-line" data-id="2">礼品包<i></i></li>       </ul>     </div>     <li>   <div class="clearfix tb-btn tb-btn-buy theme-login">     <a id="LikBuy" title="点此按钮到下一步确认购买信息" href="#">立即购买</a>    </div></li>   <li>     <div class="clearfix tb-btn tb-btn-basket theme-login">      <a id="LikBasket" title="加入购物车"><i></i>加入购物车</a>       </div>   </li>现在只能获取口味的data-id，如何点击加入购物车获取到口味的data-id、包装的data-id的值$('#LikBasket').on('click', function() {var id =  $('.sku-line.selected').data('id');console.log(id); })

Answer 1

建议给不同类名：

<div class="theme-options">
 <div class="cart-title">口味</div>
   <ul>                                               
    <li class="sku-line selected sel-flavor" data-id="1">原味</li>
    <li class="sku-line sel-flavor"  data-id="2">黑糖</li>
    <li class="sku-line sel-flavor"  data-id="3">蜂蜜</li>
   </ul>
 </div><div class="theme-options">
   <div class="cart-title">包装</div>
      <ul id="test">
       <li class="sku-line selected sel-pack" data-id="1">单人份<i></i></li>
       <li class="sku-line sel-pack" data-id="2">礼品包<i></i></li>
       <li class="sku-line sel-pack" data-id="3">豪华包装<i></i></li>
       </ul>
     </div>

然后在点击“加入购物车”按钮的时候：

$("#LikBasket").click(function(){   console.log($(".sel-flavor.selected").data("id"))//获取选择的口味data-id
   console.log($(".sel-pack.selected").data("id"))//获取选择的包装data-id})

补充一下，在同一个页面，id不要重复。

id="taste" //我看你这个三个li都是同一个id，其实完全没必要给id

Answer 2

如果有引用 jQuery 的话：

$('.sku-line').on('click', function() {    
    var id = $(this).data('id');    
    console.log(id);
})