JQuery / JavaScript Как переключить букву s в список периодов времени?

Question

Есть ли простой способ добавить и удалить завершающую букву 's' в списке периодов времени?

Так, например, когда пользователь вводит значение 5 во вход, соседний список для "дня", "недели", "месяца" и "года" в конце добавляется буква "s".

И если пользователь должен ввести значение 1, эта буква "s" будет удален из списка периодов времени (то есть, если он уже был добавлен этим скриптом).

Вот что у меня есть на данный момент:

$(document).ready(function() {

  $('.format-input').each(function() {

    $(this).keyup(function() {

      if (parseInt($(this).val()) > 1) {

        $(this).siblings('.format').eq(0).children().each(function() {

          if ($(this).val() > 1) {

            txt = $(this).html().concat('s');
            $(this).html(txt);

          }

        });

      }

    });

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="combined-input">

  <input type="text" name="length[]" class="length format-input" />

  <select name="stay_format_id[]" class="format">
    <option value="day">day</option>
    <option value="week">week</option>
    <option value="month">month</option>
    <option value="year">year</option>
  </select>


</div>

Вышесказанное не является хорошим решением. Каждый раз, когда нажимается клавиша на входе или на входе, к временным периодам добавляется буква «s». Итак, что происходит, когда пользователь вводит значение с более чем одним di git, например, из трех цифр, буква «s» будет добавлена ​​к каждому введенному di git (например, daysss).

Он также не касается сценария, в котором пользователь вводит число выше 5, а затем меняет его обратно на значение ниже 2.

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

Джеймс.

Answer 1

Если я прав, вы хотите изменить значение текста в раскрывающемся списке на множественное число, если входное значение больше 1 ...

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

В первом событии для выбора выберите дочерний элемент, который выбран с помощью option:selected, затем запустите условное выражение, чтобы увидеть, пуст ли вход, если он не пустой, мы проверяем его значение, чтобы увидеть, если он больше, чем 1, мы устанавливаем выбранный текст параметров во множественное число, иначе мы оставляем текстовое значение параметров в покое.

Второе событие - для blur ввода, поэтому, когда фокус покидает поле ввода ... Проверьте значение ввода, используя $(this), и посмотрите, больше ли оно 1, если это так, мы меняем выбранный текст параметров на множественное число, объединяя s в конце текста параметров ...

let $selection = $('.format');
let $input = $('.format-input');
// set up a function for the check
let setPlural = ($selection, $input) => {
  // event handler for the select option change
  $selection.change(function() {
    // get the child that is selected using this
    window.selected = $(this).children("option:selected");
    // this conditional will ensure the select options text stays plural if the user 
    // changes the select with an input greater than 1 still in the input field. 
    if (parseInt($input.val()) !== '') { // check that the value is not empty `!== ''`
      //check if the value is greater than 1
      if (parseInt($input.val()) > 1) {
        // pluralize the text of the option that is selected
        selected.text(selected.val() + 's');
      } else {
        selected.text(selected.val());
      }
    }
  });
  // input event handler on blur
  $input.blur(function() {
    //check if this value is greater than 1
    if (parseInt($(this).val()) > 1) {
      selected.text(selected.val() + 's');
    } else {
      selected.text(selected.val());
    }
  });
}

setPlural($selection, $input);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="combined-input">
  <input type="text" name="length[]" class="length format-input" />
  <select name="stay_format_id[]" class="format">
    <option selected disabled>Choose one</option>
    <option value="day">day</option>
    <option value="week">week</option>
    <option value="month">month</option>
    <option value="year">year</option>
  </select>
</div>