Question

如果我有这样的代码

<div class="size">
       <a class="cm active" data-id="cm">CM</a> /* ACTIVE */
       <a class="inch" data-id="inch">INCH</a>
</div>
<div class="button">
       <li data-head-cm="ABC" data-head-inch="DEF"
          data-body-cm="GHI" data-body-inch="JKL"
          class="active">                       /* ACTIVE */
               BUTTON 1
       </li>
       <li data-foot-cm="MNO" data-foot-inch="PQR"
          data-hair-cm="STU" data-hair-inch="VWX">
               BUTTON 2
       </li>
       <li data-head-cm="ABC" data-head-inch="DEF"
          data-body-cm="GHI" data-body-inch="JKL"
          data-hair-cm="STU" data-hair-inch="VWX">
               BUTTON 3
       </li>
</div>
<ul class="diagram">
</ul>

因此，身体的元素部分（头发/脚/身体/头部）的名称将进入ID，而值元素数据（例如：="ABC"）将输入goto { {1}}

当我点击其中一个按钮

时，代码会发生变化

<li>ABC</li>

当我点击/* if click BUTTON 1, diagram ul. Create element <li> */ <ul class="diagram"> <li id="head">ABC</li> <li id="body">GHI</li> </ul> /* if click BUTTON 2, diagram ul. Create element <li> */ <ul class="diagram"> <li id="foot">MNO</li> <li id="hair">STU</li> </ul> /* if click BUTTON 3, diagram ul. Create element <li> */ <ul class="diagram"> <li id="head">ABC</li> <li id="body">GHI</li> <li id="hair">STU</li> </ul>时。然后替换结束size的数据元素的值。取决于活动元素

-inch

我的工作只是https://jsfiddle.net/rwvmacjs/4/。那怎么样？

Answer 1

更新了小提琴：https://jsfiddle.net/rwvmacjs/8/

$(document).on('click', '.button li', function(e) {
    $('.button li').removeClass("active");
    $(this).addClass("active");

    $("ul.diagram").html('');
    var sizeVal = $(".size a.active").data('id');

    var ulHtml = "";

    var dataAttrs = $(this).data();

    for(x in dataAttrs) {
      var attrDetail = x.toLowerCase().split(sizeVal);
      if(attrDetail.length > 1) {
        ulHtml += '<li id="'+attrDetail[0]+'">'+dataAttrs[x]+'</li>';
      }
    }
    $("ul.diagram").html(ulHtml);
});

如何分隔jquery上的元素？

1 个答案: