如何使用 JavaScript 获取类的最接近函数调用的元素

Question

问题：我的网站上有一个简单的店面，允许用户选择数量然后添加到购物车。我遇到的问题是当用户添加到购物车时，该功能正在抓取<select> <option>html 文件中的第一个。结果是添加到购物车的任何项目都是按第一个选择器数量添加的。我避免使用 id 并将它们传递给函数，因为在某些时候所有店面项目都会被动态加载。这是我的第一次 Web 开发经验。预期结果：为项目选择数量并添加到购物车时，数量应取决于“最近”的数量。我的理解：在我addQty();下面的函数中var e = document.getElementByClassName("qty);"，应该得到最接近函数调用的“数量”类。我不知道该怎么做。代码：下面是一个item card html的样子（有多个item cards）和我写的JS函数。* HTML<div class="card-footer">    <select class="qty">        <option value="1">1</option>        <option value="2">2</option>        <option value="3">3</option>        <option value="4">4</option>        <option value="5">5</option>    </select>    <button onclick="addQty();">Add to Cart</button></div>JSfunction addQty(){  var e = document.getElementClassName("qty");  var qty = e.options[e.selectedIndex].value;  var s =  {    //Reset the cart session  to remove everything added to the cart previously.    'reset':true,    //Define the product path(s) and the quantity to add.    'products' : [      {        'path':'test-product',        'quantity': qty      }    ],    'checkout': false  }  fastspring.builder.push(s);}感谢您的帮助。我的解决方案 我在每个产品的 DOM 中的较高位置添加了一个 productID。然后在 querySelector() 调用中使用它来识别正在引用哪个选择。<div class="column" id="test-product-2">    <div class="card-footer">        <select class="qty">            <option value="1">1</option>            <option value="2">2</option>            <option value="3">3</option>            <option value="4">4</option>            <option value="5">5</option>        </select>        <button onclick="addQty('test-product-2');">Add to Cart</button>    </div></div>

Answer 1

如果您打算在一个页面上有多个产品并且不想在标签id上放置一个select，您可能仍然希望在每个产品的 DOM 中更高级别的标签上使用唯一 ID。并将该值传递给您的addQty函数。然后你可以使用querySelector，像这样：

var qtySelect = document.querySelect("#uniqueId .qty");
var qty = qtySelect.options[qtySelect.selectedIndex].value;

Answer 2

看起来您正在使用getElementById，但您尝试获取的元素没有该 ID。您应该将 id 添加到该元素或通过其他内容（例如类名）进行搜索。下面是 id 解决方案的样子：

<div class="card-footer">

    <select class="qty" id="qty">

    ...

</div>