循环输入字段并使用 javascript 隐藏

Question

我有一个页面，其中包含一些动态创建的输入字段。我需要遍历比较值的输入。如果该值与针（搜索的值）匹配，则需要隐藏输入及其标签。以下是页面中的示例：

针数：值=5762

<div id="AOSwatch" class="form-field" data-product-attribute="swatch">
    <label class="form-label form-label--alternate form-label--inlineSmall">
        Color:
        <span data-option-value></span>

            <small>Required</small>
    </label>

        <input class="form-radio AOformswatch" type="radio" name="attribute[1471]" value="5761" id="attribute_swatch_1471_5761"  required>
        <label class="form-option form-option-swatch" for="attribute_swatch_1471_5761" data-product-attribute-value="5761">
                        <span class='form-option-variant form-option-variant--color' title="Black" style="background-color: #252525"></span>
        </label>
        <input class="form-radio AOformswatch" type="radio" name="attribute[1471]" value="5762" id="attribute_swatch_1471_5762"  required>
        <label class="form-option form-option-swatch" for="attribute_swatch_1471_5762" data-product-attribute-value="5762">
                        <span class='form-option-variant form-option-variant--color' title="Brown" style="background-color: #5A442D"></span>
        </label>
        <input class="form-radio AOformswatch" type="radio" name="attribute[1471]" value="5763" id="attribute_swatch_1471_5763"  required>
        <label class="form-option form-option-swatch" for="attribute_swatch_1471_5763" data-product-attribute-value="5763">
                        <span class='form-option-variant form-option-variant--color' title="Navy" style="background-color: #1C3A6C"></span>
        </label>
</div>```

How would I do this using javascript? I already have some other javascript loading on the page, I think I'm just looking for a function or some code to loop through and do the hiding.

Thanks for any help or thoughts.

Answer 1

jQuery:

您遍历所有 input，如果找到一个值与目标值匹配的值，则对其应用 display: none。然后你也找一个属性和值匹配的label，你照样做。

var targetValue = 5762;
$("#AOSwatch").find("input").each(function(){
  if($(this).val() === targetValue){
      $(this).css("display", "none");
      $("#AOSwatch").find("label[data-product-attribute-value='"+targetValue+"']").css("display", "none");
  }
});

循环输入字段并使用 javascript 隐藏

Loop input fields and hide using javascript

html

javascript

jquery

bigcommerce