如何使用 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>

JS

function 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&nbsp;qtySelect&nbsp;=&nbsp;document.querySelect("#uniqueId&nbsp;.qty"); var&nbsp;qty&nbsp;=&nbsp;qtySelect.options[qtySelect.selectedIndex].value;

Answer 2

看起来您正在使用getElementById，但您尝试获取的元素没有该 ID。您应该将 id 添加到该元素或通过其他内容（例如类名）进行搜索。下面是 id 解决方案的样子：<div class="card-footer">&nbsp; &nbsp; <select class="qty" id="qty">&nbsp; &nbsp; ...</div>