Таргетирование событий в нескольких похожих группах предметов

Question

Мне нужна ваша помощь, пожалуйста.

Я создаю тот компонент, который объединяет несколько элементов выбора и входных данных, из которых я получаю значения для объединения их в строку в зоне предварительного просмотра. Эта строка обновляется каждый раз, когда происходит изменение в этих входах / выборках. Это работало хорошо, когда я работал над одним элементом, экспериментировал, разрабатывал его и все такое. Теперь я должен воспроизвести его в бесконечном количестве, поэтому скрипт должен работать соответствующим образом. Проблема в том, что я бесполезен, когда речь идет о целевых селекторах «это», «ближайший» и прочее. И я уверен, что моя логика ошибочна, когда дело доходит до получения значений, как вы увидите в коде, который я написал.

Я поделюсь JSFiddle, я думаю, что это будет легче понять. Если нет, я отредактирую этот пост и поделюсь им напрямую.

Может быть, мне следует объявить переменную, содержащую таргетинг, например [var route = $ (this) .parent (). Closest ()], и использовать ее для всех остальных переменных?

https://jsfiddle.net/HiD3f/8Lnowqvp/65/

<div class="container" id="settings-fr">

  <div class="group"> 
    <select class="day">
      <option value="1">Monday</option>
      <option value="2">Mon</option>
      <option value="3"> </option>
    </select>
  </div>

  <div class="group small-group"> 
    <input type="text" class="separator1">
  </div>

  <div class="group"> 
    <select class="date">
      <option value="1">October 29</option>
      <option value="2">Oct 29</option>
      <option value="3">10 29</option>
      <option value="1">29 October</option>
      <option value="2">29 Oct</option>
      <option value="3">29 10</option>
    </select>
  </div>

  <div class="group small-group"> 
    <input type="text" class="separator2">
  </div>

  <div class="group"> 
    <select class="year">
      <option value="1">2018</option>
      <option value="2">18</option>
      <option value="3"> </option>
    </select>
  </div>

  <div class="preview"> preview </div>

</div>


<div class="container" id="settings-us">

  <div class="group"> 
    <select class="day">
      <option value="1">Monday</option>
      <option value="2">Mon</option>
      <option value="3"> </option>
    </select>
  </div>

  <div class="group small-group"> 
    <input type="text" class="separator1">
  </div>

  <div class="group"> 
    <select class="date">
      <option value="1">October 29</option>
      <option value="2">Oct 29</option>
      <option value="3">10 29</option>
      <option value="1">29 October</option>
      <option value="2">29 Oct</option>
      <option value="3">29 10</option>
    </select>
  </div>

  <div class="group small-group"> 
    <input type="text" class="separator2">
  </div>

  <div class="group"> 
    <select class="year">
      <option value="1">2018</option>
      <option value="2">18</option>
      <option value="3"> </option>
    </select>
  </div>

   <div class="preview"> preview  </div>

</div>

и сценарий:

$('select, input').change(function() {

  let day = $(".day option:selected").text();
  let sep1 = $(".separator1").val();
  let date = $(".date option:selected").text();
  let sep2 = $(".separator2").val();
  let year = $(".year option:selected").text();

  let preview = day + sep1 + date + sep2 + year;

  let parent = $(".container");

  $(this).parent('.group').closest(".preview").empty().append(preview);

});

Пожалуйста, помогите мне, я застрял. Спасибо.

Answer 1

Измените свою логику, чтобы найти детей на основе раздела, в котором они находятся.

$('select, input').change(function() {
  //find the container the changed element belongs to
  let $container = $(this).closest('.container');
  let day = $container.find('.day option:selected').text();
  let sept = $container.find('.separator1').val();
  
  //...
});

Answer 2

Измени свою линию

$(this).parent('.group').closest(".preview").empty().append(preview);

до

$(this).parents()
  .filter(function() {
    return (this.getAttribute('class') === 'container');
  }).find('.preview').text(preview);