Question

我正在尝试创建一个购买收据互动，其中用户clicks的{{1}}号和所有具有相同SKU的列表items都是SKU显示所有具有相同cloned的所有匹配项的列表。

我希望将匹配的结果返回到SKU，而不是附加原始列表项，以便如果单击其他modal，结果将替换为最后选择的SKU

SKU

$("li a").click(function() {
  var item = $(this).closest("li");
  var sku = $(this).html();

  var $parent = $("li#" + sku);
  $parent = $('<li id="' + sku + '">')
    .clone()
    .appendTo(".modal");
});

ul {
  height: 200px;
  width: 200px;
  margin-block-start: 0;
  margin-block-end: 0;
}

li {
  display: flex;
  align-items: center;
  border: 1px solid;
  padding: 0.9rem 0rem;
}

li a:hover {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

.bullet {
  margin: 0.3rem;
  border-radius: 50%;
  height: 25px;
  width: 25px;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.green {
  background: green;
}

.wrap {
  display: flex
}

.modal {
  height: 200px;
  width: 200px;
  border: 1px solid;
}

Answer 1

在这种情况下，我更喜欢使用data属性，而不是使用.html()来获取值

为每个data-sku添加<a>及其编号
使用相同的li过滤包含<a>的{{1}}
使用sku
请注意：在克隆.html()并将其附加到li时，它将是{{1}中的div.modal s }，这是无效的结构，因此您需要将<li>更改为<div>，或者可以在<div.modal内创建<ul>并使用<ul></ul> ..然后您需要在CSS中将div.modal分开，$('div.modal > ul').html(....)中的<ul>和ul
中的.wrap分开li>

ul

.modal

$(document).on('click',".wrap > ul > li:not(.appended) > a",function() {
  var sku = $(this).data('sku');    // get data sku
  var FilTer = $('a[data-sku="'+sku+'"]').closest('li').clone(); // filter li which contains same data sku and get clone from it
  $('.wrap > ul > li').removeClass('appended').filter(function(){ // remove the class `appended` from all the `wrap li`s then filter `li`
    return $(this).find('a[data-sku="'+sku+'"]').length; // return just the li which contains the a with data-sku
  }).addClass('appended'); // add class appended to this li
  $('.modal > ul').html(FilTer); // change the modal html with the filtered html
});

说明为避免每次点击克隆并附加

您需要将类（例如ul { height: 200px; width: 200px; margin-block-start: 0; margin-block-end: 0; } li { display: flex; align-items: center; border: 1px solid; padding: 0.9rem 0rem; } li a:hover { color: blue; text-decoration: underline; cursor: pointer; } .bullet { margin: 0.3rem; border-radius: 50%; height: 25px; width: 25px; } .blue { background: blue; } .red { background: red; } .green { background: green; } .wrap { display: flex } .modal { height: 200px; width: 200px; border: 1px solid; }）设置为附加的<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrap"> <ul> <li> <div class="bullet blue"></div> <a data-sku="1234">1234</a> </li> <li> <div class="bullet red"></div> <a data-sku="0808">0808</a> </li> <li> <div class="bullet green"></div> <a data-sku="9011">9011</a> </li> <li> <div class="bullet blue"></div> <a data-sku="1234">1234</a> </li> <li> <div class="bullet green"></div> <a data-sku="9011">9011</a> </li> </ul> <div class="modal"> <ul></ul> </div> </div>
要使click事件与附加类一起使用，您需要appended
最好使用li登录选择器仅在$(document).on('click',".wrap > ul > li:not(.appended) > a",function() {元素中获取>和li

jQuery-按选定的SKU编号退回商品

1 个答案: