时间戳

首页 > 解决方案 > jQuery - 按选定的 SKU 编号返回项目

jquery - jQuery - 按选定的 SKU 编号返回项目

问题描述

我正在尝试创建一个购买收据交互，其中用户clicks一个SKU数字和所有items相同的列表SKU都cloned到一个列表以显示所有具有相同的匹配项目SKU。

我不想附加原始列表项，而是希望将匹配结果返回到 ，modal以便如果您单击不同SKU的 ，结果将替换为最后一个 selected 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;
}
<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>1234</a>
    </li>
    <li>
      <div class="bullet red"></div>
      <a>0808</a>
    </li>
    <li>
      <div class="bullet green"></div>
      <a>9011</a>
    </li>
    <li>
      <div class="bullet blue"></div>
      <a>1234</a>
    </li>
    <li>
      <div class="bullet green"></div>
      <a>9011</a>
    </li>
  </ul>
  <div class="modal"></div>
</div>

标签： jquery

解决方案

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

  • data-sku为每个添加<a>其编号

  • 过滤li包含<a>相同的sku

  • 改变模式.html()

  • 小心克隆lis 并将其附加到div.modals<li>中<div>，这是一个无效的结构，因此您需要更改<div.modal为，或者您可以在内部<ul>创建一个并使用.. 然后您需要将in分开css 一个用于in ，另一个用于in<ul></ul>div.modal$('div.modal > ul').html(....)<ul>ul.wrapul.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>

说明为了避免每次单击时克隆和附加

  • 您需要将类（例如：）设置appended为附加li

  • 要使单击事件与附加的类一起工作，您需要$(document).on('click',".wrap > ul > li:not(.appended) > a",function() {

  • 最好使用>登录选择器仅获取liand ainwrap元素

推荐阅读