jQuery - 按所选 SKU 编号返回商品

Question

我正在尝试创建一个购买收据交互，其中用户clicks一个SKU编号，并且具有相同SKU的所有列表items都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;
}

<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>

Answer 1

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

• 将每个<a>的data-sku及其编号相加

• 筛选包含具有相同sku<a>的li

• 使用.html()更改模态

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

说明避免每次单击时克隆和追加

• 您需要将类(例如：appended)设置为附加的li

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

最好

• 使用>登录选择器来仅获取元素wrap中的li和a