javascript - 获取位于表jquery中的输入字段的值

Question

这应该是受 jeasyui.com 启发的购物车.我遇到了三个问题。

1. 在输入框中更改数量时无法获取数量值。
2. 当我从购物车中删除某件商品时，该服务必须再次出现在其相应的选项卡中。
3. 每个新选项卡的服务都会缩进。我需要他们每次都从头开始。

这是我目前的代码:codepen.io .很抱歉，如果它很乱，这是我第一次使用 javascript/jquery。任何帮助表示赞赏。谢谢你!

function removeProduct(el) {
 var name1 = $(el).closest('tr').find('td').eq(0).text();
 var price1;
 for (var i = 0; i < data.length; i++) {
   if (name1 == data[i][0]) {
   price1 = data[i][2];
 }
   var className = $(el).parent().attr('class');
   /**Add a new list item in item class with the class name and the service name and price in paragraphs.*/
   $(el).closest('tr').remove();
 }
}

function changeQuantity(el) {
var name1 = $(el).closest('tr').find('td').eq(0).text();
var quantity1 = $(el).closest('tr').find('td').eq(1).value;
var price1;
for (var i = 0; i < data.length; i++) {
  data[i][1] = quantity1;
  data[i][2] = price * quantity1;
  if (name1 == data[i][0]) {
    price1 = data[i][2];
  }
}
 $(el).closest('tr').find('td').eq(1).html("<input type='number' value='" + quantity1 + "' style='width:100%;'>");
 $(el).closest('tr').find('td').eq(3).html(price1);
}

Answer 1

要获取数量，请执行以下操作:

$(el).closest('tr').find('td').eq(1).find('input').val();

因为您要使用 source.remove(); 从 DOM 中物理删除元素，所以这并不容易。我建议向将隐藏它的元素添加一个类。然后，当您将其从卡中删除时，删除该类。

对于您的第三个问题，删除隐藏产品类别的 CSS，而是添加:

删除:

.Biostatistics {
    display: none;
}
.ClinicalLaboratory {
    display:none;
}
.Something{
    display:none;
}

添加:

.Products li {
    display: none;
}

也将您的 js 改成这样(添加 closest('li')):

x[i].closest('li').style.display = 'none';