jQuery 高级 dom 导航

Question

情况正在更新 javascript 的购物车。事件来自更改 select name="variation-1" 的项目变体。有很多 .shop-items 。如果您从 select name="variation-1" =

的更改中获得 $(this)，如何获取具有 data-product-id 的输入句柄

<div class="product-tools shop-item">
    <div class="count-input">
        <a class="incr-btn" data-action="decrease" href="#">–</a>
        <input class="quantity" type="text" data-product-id="7" value="3">
        <a class="incr-btn" data-action="increase" href="#">+</a>
    </div><!-- .count-input -->                         
    <div class="form-element">
        <select name="variation-1" class="form-control form-control-sm variation-select" data-toggle="tooltip" title="" data-original-title="color">
            <option value="blue">blue</option>                        
            <option value="red" selected="">red</option>   
        </select>
    </div>
    <div class="form-element">
        <select name="variation-2" class="form-control form-control-sm variation-select" data-toggle="tooltip" title="" data-original-title="size">
            <option value="S">S</option>                        
            <option value="M">M</option>                        
            <option value="L">L</option>                        
            <option value="XL" selected="">XL</option>                        
            <option value="XXL">XXL</option>               
        </select>
    </div>
</div>

Answer 1

这应该可以让您从相关输入中获得产品 ID。它遍历到封闭的 "shop-item" div，然后在其中搜索具有 product-it 数据属性的 "quantity" class 的输入：

var productID = $(this).closest(".shop-item").find(".quantity").data("product-id");

或者，如果您想找到具有 "data-product-id" 属性的实际元素，您可以按照以下评论中的建议进行操作：

var input = $(this).closest(".shop-item").find("[data-product-id]");

jQuery 高级 dom 导航

jQuery advanced dom navigation

html

jquery

dom

selector