我有兩個串列，一個用于要選擇的產品，另一個用于選擇的產品，我希望能夠將所選產品退回到原來的位置。
我有點用以下格式解決它，但問題是它可能是數百種產品
$(document).on('click', "#remove_product", function () {
var product = $(this).parents("li"),
found = false;
$('.products_list li').each(function() {
if(this.id > product.attr('id') && !found ){
product.clone().insertBefore(this);
found = true;
}
});
if(!found) product.clone().append(".products_list");
product.remove();
}).products_list button{
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="products_list">
<li id="1">Content 1</li>
<li id="2">Content 2</li>
<li id="4">Content 4</li>
<li id="5">Content 5</li>
</ul>
<hr>
<ul class="selected_products">
<li id="3">
Content 3
<button id="remove_product">remove product</button>
</li>
</ul>有什么更好的解決辦法嗎？
uj5u.com熱心網友回復：
實作你的目標最簡單的方法是創建該排序功能li的中的元素ul根據他們的id。然后，只要對li.
ul當從每個容器中添加/洗掉專案時，該函式也可以變得足夠通用以適用于兩個容器。
請注意，在下面的示例中，我默認將button元素添加到每個元素li，根據您通過 CSS 為初始串列隱藏它們的模式。我還將id按鈕上的更改為 a class，因為id需要是唯一的。
話雖如此，試試這個：
let $productsList = $('.products_list');
let $selectedList = $('.selected_products');
let sortProductsInContainer = $container => $container.find('li').sort((a, b) => a.id > b.id ? 1 : -1).appendTo($container);
// add product to selected list
$productsList.on('click', 'li', e => {
$(e.target).closest('li').appendTo($selectedList);
sortProductsInContainer($selectedList);
});
// remove product from selected list
$selectedList.on('click', ".remove_product", e => {
$(e.target).closest("li").appendTo($productsList);
sortProductsInContainer($productsList);
}).products_list button {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="products_list">
<li id="1">Content 1 <button class="remove_product">remove product</button></li>
<li id="2">Content 2 <button class="remove_product">remove product</button></li>
<li id="4">Content 4 <button class="remove_product">remove product</button></li>
<li id="5">Content 5 <button class="remove_product">remove product</button></li>
</ul>
<hr>
<ul class="selected_products">
<li id="3">Content 3 <button class="remove_product">remove product</button></li>
</ul>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338321.html
標籤：javascript 查询
上一篇：React鉤子不更新組件