如何遍历选择器从选择标签到按钮标签？

Question

我在下面有这个 HTML 代码。 我想使用下拉菜单更改按钮的属性。 我在一个页面中有很多这样的设置，所以按 ID 选择器不是一个选项。 （我已经考虑过单独拥有身份证，但这将是我最后的手段。）

 $('.shirtSize').on('change', function() { $(this).parent().children("button").attr("data-item-custom1-value", this.value); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product-item-content"> <span> <select class="shirtSize"> <option>S</option> <option>M</option> <option>L</option> <option>XL</option> </select> </span> <span> <select class="shirtColor"> <option>White</option> <option>Blue</option> </select> </span> <span> <button class="mini-btn">Add To Cart</button> </span> </div>

Answer 1

select的父级是span 。 该button不是span的子级。

您需要一直到div ，然后在其中搜索按钮。

 $('.shirtSize').on('change', function() { $(this).closest("div.product-item-content").find("button").attr("data-item-custom1-value", this.value); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product-item-content"> <span> <select class="shirtSize"> <option>S</option> <option>M</option> <option>L</option> <option>XL</option> </select> </span> <span> <select class="shirtColor"> <option>White</option> <option>Blue</option> </select> </span> <span> <button class="mini-btn">Add To Cart</button> </span> </div>

Answer 2

Barmar 的解决方案似乎只在第一次更改按钮数据属性，并且也只会分配第一个选择元素的数据。 以下代码段将收集两个选择值并将它们（重复）分配给按钮元素的数据属性：

 $(document.body).on('change',"select", function() { let p=$(this).closest("div.product-item-content"); $("button",p).data("item-custom1-value",$("select",p).get().map(s=>s.value).join("-")); console.log($("button",p).data("item-custom1-value")); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product-item-content"> <span> <select class="shirtSize"> <option>S</option> <option>M</option> <option>L</option> <option>XL</option> </select> </span> <span> <select class="shirtColor"> <option>White</option> <option>Blue</option> </select> </span> <span> <button class="mini-btn">Add To Cart</button> </span> </div> <div class="product-item-content"> <span> <select class="shirtSize"> <option>A</option> <option>B</option> <option>C</option> <option>DL</option> </select> </span> <span> <select class="shirtColor"> <option>Red</option> <option>Green</option> <option>Black</option> <option>White</option> </select> </span> <span> <button class="mini-btn">Add To Cart</button> </span> </div>