Question

我的html中有多个选择框，如下所示：

<select class=".form-bestel.select" name="product">
    <option value="0">Melk, vol (0,5l)</option>
    <option value="1">Melk, vol (1l) </option>
    <option value="2">Melk, mager (1l) </option>
</select>

<select class=".form-bestel.select" name="product">
    <option value="3">Boter (250g)</option>
    <option value="4">Boter (500g)</option>
    <option value="5">Boter (1kg)</option>
    <option value="6">Kruidenboter (125g)</option>
    <option value="7">Kruidenboter (1kg)</option>
</select>

每个选择框下的

是金额的输入字段：

<input class=".form-bestel" name="amount" id="amount" placeholder="Aantal" type="number" min="0" style="width: 100%;heigt:100%;margin-bottom: 5px;"> </input>

该输入字段下的

是一个按钮：

<a href="#0" class="cd-add-to-cart" style="margin-bottom: 40px; margin-top: 30px;">Voeg toe</a>

该按钮与javascript连接。当点击以下功能运行时：

addToCartBtn.on('click', function(event){
    event.preventDefault();
    addToCart($(this));
});

然后：

function addToCart(trigger) {
    var cartIsEmpty = cartWrapper.hasClass('empty');
    //update cart product list
    addProduct();
    //update number of items 
    updateCartCount(cartIsEmpty);
    //update total price
    updateCartTotal(trigger.data('price'), true);
    //show cart
    cartWrapper.removeClass('empty');
}

然后：

function addProduct() {
    //var productid = document.getElementById('product').value;
    var productid = 4;
    var product = products[productid];

    var price = prices[document.getElementById('product').value];
    var amount = document.getElementById('amount').value;
}

注意：我知道html中没有id的产品或数量。那是我的问题：

如果我无法为他们提供相同的ID，我如何从2个或更多个不同的html选择框中获取所选值。我怎样才能最好地通过我调用的第一个js函数？

我想要的是，当我选择正确的东西并按下按钮＆＃34; Voeg toe＆＃34;它出现在我的购物车中。所以JS函数需要知道我选择了哪一个以及输入中的整数。

Answer 1

这是在页面中重复组件的常见模式。

您的演示中充满了许多不相关的代码，因此我将向您展示一个简化的案例

您希望使用按钮的遍历来隔离产品实例，并且他们在该实例中查找输入值

$('.cd-add-to-cart').on('click', function(e){
  // isolate instance
   var $row = $(this).parent(),
       // look inside instance for values
       qty = $row.find('input').val(),
       type = $row.find('select').val(); 

      // do something with these values
});

Html通过javascript选择购物车的多个选项

1 个答案: