Question

所以我创建了这两个产品的表格，您可以将它们添加到您的购物车中。各自的数量。现在，我已将其设置为每当＆＃34;添加到购物车＆＃34;按下按钮将减少该产品的数量。我遇到麻烦的一件事就是在数量达到零时关闭按钮。任何帮助将不胜感激，谢谢。

const data = [
{Title: "Beer Heineken 6-pack", Quantity: 5, Price: 6.75, Action: null},
{Title: "Sun-dry Fish 1 lb.", Quantity: 3, Price: 10, Action: null}
];

$(document).ready(function() {
   $("div#preload h2").html();
   let table = $('<table>').addClass('table table-
   striped').appendTo(document.body);
   table.append($('<thead>').append($('<tr>')));
   table.append($('<tbody>'));
   let headerRow = table.find('thead tr');
   Object.keys(data[0]).forEach(function(key) {
    headerRow.append($('<th>').text(key));
})

let tbody = table.find('tbody');

let tableRender = function(){
    data.forEach(function(dataItem, index) {
        let tr = $('<tr>').appendTo(tbody);
        Object.keys(dataItem).forEach(function(key){
            if(dataItem[key] !== null) {
                tr.append($('<td>').text(dataItem[key]));
            }
            else{
                tr.append($('<td>').append($('<button>')
                .addClass('btn btn-secondary').text("Add To Cart")
                .click(function() {
                    dataItem.Quantity = dataItem.Quantity < 1 ? 0 : dataItem.Quantity - 1;
                    tbody.empty();
                    tableRender();



                })));
            }
        })
    })
}

tableRender();
})

Answer 1

有一个简单的jquery禁用at this link

的例子

它使用.prop（）方法将所选项目的“禁用”属性（在本例中为您的按钮）设置为true。

我假设您已经知道如何检查您的数量是否达到零： - ）

Answer 2

由于您要重新绘制所有表格HTML，因此您需要设置按钮＆＃34;禁用＆＃34;重绘期间的属性，取决于数量是否为零。

tr.append($('<td>').append($('<button>')
  .prop("disabled", dataItem.Quantity === 0)
  .addClass('btn btn-secondary').text("Add To Cart") //...

（重新绘制完整的表格HTML可能会让您遇到问题;附加到表格的任何用户输入或事件绑定在重新绘制时都会被吹走。）

数量达到0

2 个答案: