JavaScript 列表比较和 CRUD

Question

背景

我正在尝试创建一个订购系统。第一个数组包含 6 个项目（5 个索引），第二个数组为空。当用户单击 html 项目时，它会将项目名称从 array1 添加到 array2。我试图让它动态化，所以如果用户选择了一个项目并且它在 array2 中，这个索引将被删除，如果没有，那么将被添加。

问题

即使在调试并确保它更容易理解之后，我也找不到列表出错的原因。奇怪的随机 js 根本不工作甚至工作，然后给出错误，如添加“，”字符等。

数组

这些是所有函数都可以访问的 2 个数组：

const all_items = ['some item 1', 'some item 2', 'some item 3', 'some item 4', 'some item 5', 'some item 6'];
const order_items = [];

功能：点击项目时

当一个项目被点击时，这个函数被调用。

function item_click(item) {
    if (item == 0) {
        if (isItemInOrder(all_items[0])) {
            var itemid = findItemIndex(all_items[0]);
            delete order_items[itemid];
            order_items = order_items.filter(element => {
                return element !== null;
            });
            document.getElementById("item0").classList.remove('bg:gray-100');
        } else {
            order_items.push(all_items[0]);
            document.getElementById("item0").className += " bg:gray-100";
        }
    } else if (item == 1) {
        if (isItemInOrder(all_items[1])) {
            var itemid = findItemIndex(all_items[1]);
            delete order_items[itemid];
            order_items = order_items.filter(element => {
                return element !== null;
            });
            document.getElementById("item1").classList.remove('bg:gray-100');
        } else {
            order_items.push(all_items[1]);
            document.getElementById("item1").className += " bg:gray-100";
        }
    } else if (item == 2) {
        if (isItemInOrder(all_items[2])) {
            var itemid = findItemIndex(all_items[2]);
            delete order_items[itemid];
            order_items = order_items.filter(element => {
                return element !== null;
            });
            document.getElementById("item2").classList.remove('bg:gray-100');
        } else {
            order_items.push(all_items[2]);
            document.getElementById("item2").className += " bg:gray-100";
        }
    } else if (item == 3) {
        if (isItemInOrder(all_items[3])) {
            var itemid = findItemIndex(all_items[3]);
            delete order_items[itemid];
            order_items = order_items.filter(element => {
                return element !== null;
            });
            document.getElementById("item3").classList.remove('bg:gray-100');
        } else {
            order_items.push(all_items[3]);
            document.getElementById("item3").className += " bg:gray-100";
        }
    } else if (item == 4) {
        if (isItemInOrder(all_items[4])) {
            var itemid = findItemIndex(all_items[4]);
            delete order_items[itemid];
            order_items = order_items.filter(element => {
                return element !== null;
            });
            document.getElementById("item4").classList.remove('bg:gray-100');
        } else {
            order_items.push(all_items[4]);
            document.getElementById("item4").className += " bg:gray-100";
        }
    } else if (item == 5) {
        if (isItemInOrder(all_items[5])) {
            var itemid = findItemIndex(all_items[5]);
            delete order_items[itemid];
            order_items = order_items.filter(element => {
                return element !== null;
            });
            document.getElementById("item5").classList.remove('bg:gray-100');
        } else {
            order_items.push(all_items[5]);
            document.getElementById("item5").className += " bg:gray-100";
        }
    }
}

功能：查找数组中项目的索引

function findItemIndex(itemName) {
    for (var i = 0; i < order_items.length; i++) {
        if (order_items[i] === itemName) {
            return i;
            break;
        } else {
            return false;
        }
    }
}

功能：查找商品是否在订单列表中

function isItemInOrder(itemName) {
    for (var i = 0; i < order_items.length; i++) {
        if (order_items[i] === itemName) {
            return true;
            break;
        } else {
            return false;
        }
    }
}

结论

我不知道如何执行这种CRUD 操作。 SO，youtube等我都搜过了，他们的增删改查操作都是跟ajax和文件相关的，不过这个应该没问题。

Answer 1

我想帮助您解决这个编码问题。此代码执行您在后台询问的内容。我没有在此代码中包含任何 html 操作，因为我觉得首先了解算法很重要，然后再添加您的 ui 代码。

    const all_items = ['some item 1', 'some item 2', 'some item 3', 'some item 4', 'some item 5', 'some item 6'];
    const order_items: string[] = [];

    function order(index) {
        // see if the items from all_items[] is in order_items
        // indexOf will return the index if found otherwise -1
        const existing = order_items.indexOf(all_items[index]);
        if (existing >= 0) {
            // item found in order_items
            order_items.slice(existing, 1);         // remove item from order_items
        } else {
            // item not found in order_items
            order_items.push(all_items[index]);     // add item to order_items
        }
    }

如果这对您有帮助，我很乐意扩展它以包含您的 DOM 操作逻辑。

Answer 2

这是我根据您所说的仅使用纯 javascript 快速整理的内容。虽然我必须说这似乎是实施订购系统的糟糕方式...

const all_items = ['some item 1', 'some item 2', 'some item 3', 'some item 4', 'some item 5', 'some item 6'];
var order_items = [];

const itemList = document.getElementById("itemList");
const orderList = document.getElementById("orderList");

function handleClick(item){
  if(order_items.includes(item.innerHTML)){
    //remove item
    order_items = order_items.filter(e => e !== item.innerHTML);
  }else{
    //add item
    order_items.push(item.innerHTML);
  }
  var items = document.getElementsByClassName('orderItem');
  while(items[0]) {
      items[0].parentNode.removeChild(items[0]);
  }
  order_items.forEach(item => {
    var i = document.createElement("li");
    i.setAttribute("class", "orderItem");
    i.innerHTML = item;
    orderList.appendChild(i);
  });
}

all_items.forEach(item => {
  var i = document.createElement("li");
  i.setAttribute("class", "item");
  i.innerHTML = item;
  i.setAttribute("onclick", "handleClick(this)");
  itemList.appendChild(i);
});

body{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.item{
  background-color: crimson;
  color: white;
  padding: 1rem;
  margin-bottom: 5px;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.3s;
}
.item:hover{
  transform:scale(1.1);
}

<div>
<h1>all items</h1>
<ul id="itemList">
</ul>
</div>

<div>
<h1>orderd list</h1>
<ul id="orderList">
</ul>
</div>

JavaScript 列表比较和 CRUD

JavaScript List Comparison and CRUD

javascript

crud

背景

问题

数组

功能：点击项目时

功能：查找数组中项目的索引

功能：查找商品是否在订单列表中

结论