Блог

Главная - Вопросы по программированию - Условие jQuery для всех входных данных

Условие jQuery для всех входных данных

#jquery

#jquery

Вопрос:

Я хочу создать функцию jquery для изменения атрибута ввода css при изменении значения. Проблема: я хочу, чтобы универсальная функция не повторяла один и тот же код для всех разных входных данных

Мой код (повторите код jquery):

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
        jQuery(document).ready(function( $ ) {

            var initinputvalue1 = $("#input1").val();
            $("#input1").change(function(){
                if ( $("#input1").val() !== initinputvalue1 ) {
                    $("#input1").css("border-color", "rgb(255, 144, 0)");
                }
            });
            var initinputvalue2 = $("#input2").val();
            $("#input2").change(function(){
                if ( $("#input2").val() !== initinputvalue2 ) {
                    $("#input2").css("border-color", "rgb(255, 144, 0)");
                }
            });
        });
    </script>
    <label for="input1">Input 1</label>
    <input type="text" id="input1" name="input1"/>
    <br><br>
    <label for="input2">Input 2</label>
    <input type="text" id="input2" name="input2"/

Возможно ли что-то подобное?

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
        jQuery(document).ready(function( $ ) {
        var initinputvalue = $(":input").val();
            $(":input").change(function(){
                if ( $(":input").val() != initinputvalue ) {
                    $(":input").css("border-color", "blue");
                }
            });
        });
    </script>
<label for="input1">Input 1</label>
    <input type="text" id="input1" name="input1"/>
    <br><br>
    <label for="input2">Input 2</label>
    <input type="text" id="input2" name="input2"/>
    <br><br>

У меня это не работает

Ответ №1:

Чтобы одна и та же логика работала для нескольких элементов, поместите в них общий класс, а затем выберите по этому классу. Затем вы можете использовать this ключевое слово или target свойство события, чтобы ссылаться на элемент, который вызвал событие внутри обработчика.

Кроме того, обратите внимание, что ваш код может быть упрощен. Для запуска change события значение элемента должно было измениться, поэтому ваше if условие является избыточным и может быть удалено. Попробуйте это:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  jQuery($ => {
    $(".input").on('change', function() {
      $(this).css("border-color", "rgb(255, 144, 0)");
    });
    
    // alternative:
    // $('.input').on('change', e => $(e.target).css("border-color", "rgb(255, 144, 0)"));
  });
</script>
<label for="input1">Input 1</label>
<input type="text" id="input1" name="input1" class="input" />
<br><br>
<label for="input2">Input 2</label>
<input type="text" id="input2" name="input2" class="input" />