Эффективный способ написать оператор jQuery if для нескольких элементов

Question

У меня есть эта форма, которая использует данные по умолчанию, и я должен быть уверен, что они очищены перед отправкой.У меня есть сценарий отбойного молотка, который будет это делать, но мне интересно, если кто-нибудь из вас возражает помочь мне уловить его.

Сценарий ниже работает и прекрасно работает, если я хочу написать его для каждого вводаформа (в настоящее время 8 с данными по умолчанию).Я попытался выбрать все входные данные в форме с несколькими различными подходами, но, похоже, ничего не работает.Я предполагаю, что есть гораздо более умный способ приблизиться к этому, чем я способен, поэтому я прихожу сюда:)

$('#form_input_submit').click(function() {
    if ($('#specific_input_id').val() == $('#specific_input_id').attr('data-default')) {
      $('#specific_input_id').val('');
    }
    return true;
});

Answer 1

Это проверит все входные элементы, которые имеют элемент данных по умолчанию, и очистит эти поля перед отправкой.

$('#tour_submit').click(function() {
    $('input[data-default]').each(function(index) {
      if ($(this).val() == $(this).attr('data-default')) {
       $(this).val('');
      }
    });
});

Answer 2

Вы можете передать функцию в .val(), упрощая ваш код до этого для всех входов:

$('#form_id').submit(function() {
   $(this).find('[data-default]').val(function(i, v) {
      return $(this).data('default') == v ? "" : v;
    });
});

Кроме того, вместо присоединения к событию click кнопки отправки происходит прослушивание события submit самого <form>.

Answer 3

Вы можете получить все входные данные в форме и перебрать их. Если некоторые из них являются радиоприемниками или выбирают входы, нам нужно немного их изменить.

$('#form_input_submit').click(function() {
    $(this).closest('form').find('input').each(function() {
        if( this.value == $(this).attr('data-default') ) {
           this.value = '';
        }
    });
});

При нажатии на кнопку form_input_submit он получает .closest() предка <form>, и оттуда .find() получит все элементы <input>.

Затем он перебирает коллекцию, используя .each().

Если $(this).attr('data-default') представляет начальное значение ввода, полученное с сервера (или любым другим способом из его исходного состояния), вы можете сделать это вместо этого:

    if( this.value == this.defaultValue ) {
       this.value = '';
    }

Answer 4

Попробуйте дать всем входным элементам класс, затем сделайте это

$('#form_input_submit').click(function() {
    $('.inputs').each(function() {
       if ($(this).val() == $(this).attr('data-default')) {
          $(this).val('');
       }
    });
    return true;
});