javascript - 使用 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:

您迭代所有输入，如果找到一个值与目标值匹配的输入，则对其应用display: none。然后你还找到一个属性与值匹配的标签，并执行相同的操作。

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");
  }
});