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

Question

1.当点击加入购物车或立即购买时获取到口味、包装的选中的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>
    <li class="sku-line" id="taste" data-id="3">蜂蜜</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>
       <li class="sku-line" data-id="3">豪华包装<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);
})

Answer 3

...
这个问题很简单吧。

一般类似的问题都可以用相同方法解决，

你的选中某项不是变红了，应该是含有某个class

点击加入购物车遍历元素是否有class。

第二种方法，

js中设置个变量，初始为null

点击某个元素获取data-id赋值给变量。
点击加入购物车按钮就能获取到了。