如何獲取同級輸入元素的值？

Question

我在這里要做的只是為我的電子商務網站更新我的購物車。 為此，我需要使用“檢查按鈕”確認產品的數量。 到目前為止，我已經通過所有元素“檢查按鈕”設法 go，但是現在我在訪問輸入值時遇到了麻煩。

<div class="plus-minus-input">
        <span class="minus" data-action="remove" data-pack={{ item.product.pack }}>&#8722;</span>
        <input class="quantity" type="number" id="{{item.product.id}}" value="{{item.quantity}}"/>
        <span class="plus" data-action="add" data-pack={{ item.product.pack }}>&#43;</span>
        <span class="update-cart check" id="{{item.product.id}}">&#10004;</span>
</div>

...

checkBtns = document.getElementsByClassName("update-cart");

    for (var i = 0; i < checkBtns.length; i++){
        checkBtns[i].addEventListener("click", function(e) {
            var productId = $(this).attr("data-productId");
            var action = $(this).attr("data-action");

            var parentDiv = $(this).parentNode;
            var inputVal = parseInt(parentDiv.childNodes[1].dataset.value);
            var pack = parseInt(this.dataset.pack);
...

Answer 1

$(this)沒有任何意義，因為您不在 jQuery 事件處理程序中。 最簡單的解決方法是糾正這一點：

$(checkBtns[i]).click(function() { ... }

然后您可以訪問 jQuery 中的單擊元素，並且可以執行以下操作：

const inputVal = parseInt( $(this).siblings('.quantity').val() );

如果您想清除 jQuery 的生活（在當時很棒，不再需要），請轉換為：

const parentDiv = e.target.parentNode;
const inputVal = parseInt(parentDiv.childNodes[1].dataset.value);

但是，按頁面中的順序引用元素是一種脆弱的方法。 如果您的布局發生變化，它會中斷。 相反，通過 class 獲取元素：

const inputVal = parseInt(parentDiv.getElementByClassName('quantity')[0].value);

Answer 2

在最后一行中，當您使用this.dataset.pack時， this指的是span.update-cart ，它沒有“pack”屬性。

Answer 3

<element>.dataset.value不會被定義，因為 value 沒有data-前綴。 數據集上的 MDN

 const an_input = document.getElementById('an_input'); console.log(an_input.dataset.value); console.log(an_input.value);

 <input type="number" id="an_input" value="3" />

根據您的開發環境/目標瀏覽器，您可以使用最接近的和querySelector 。

 const checkBtns = document.getElementsByClassName("update-cart"); for (var i = 0; i < checkBtns.length; i++){ checkBtns[i].addEventListener("click", function(e) { const input = e.target.closest('.plus-minus-input').querySelector('.quantity'); console.log(Number(input.value)); }); }

 <div class="plus-minus-input"> <input class="quantity" type="number" id="{{item.product.id}}" value="{{item.quantity}}"/> <span class="update-cart check" id="{{item.product.id}}">&#10004;</span> </div>

使用最接近應該使您免受更改，使.plus-minus-input不再是檢查按鈕的直接父級。 （例如，出於布局原因或您有什么，將按鈕包裝在 div 中。）