L oop поля ввода и скрыть используя javascript - PullRequest
Новая
       17

L oop поля ввода и скрыть используя javascript

1 голос
/ 28 февраля 2020

У меня есть страница с некоторыми полями ввода, которые создаются динамически. Мне нужно l oop через входы, сравнивающие значение. Если значение соответствует стрелке (поиск значения), то ввод и его метка должны быть скрыты. Ниже приведен пример со страницы:

Игла: значение = 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.

1 Ответ

2 голосов
/ 28 февраля 2020

jQuery:

Вы перебираете все input s, и если вы найдете тот, чье значение соответствует целевому значению, вы применяете к нему 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");
  }
});
...