在多个相似的项目组中定位事件

Question

我需要你的帮助。

我正在创建重新组合多个选择和输入的组件，我从中获取值以将它们连接到预览区域中的字符串中。每当 inputs/selects 中发生更改时，都会更新此字符串。当我在一个元素上工作、试验、设计它和其他东西时，它工作得很好。现在我必须将它复制到可能无限的数量，所以脚本必须相应地工作。问题是，当涉及到目标选择器 "this"、"closest" 之类的东西时，我毫无用处。而且我确信在获取值时我的逻辑存在缺陷，正如您将在我编写的代码中看到的那样。

我会分享 JSFiddle，我认为它会更容易理解。如果没有，我会编辑这个post并直接分享。

也许我应该声明一个包含目标的变量，例如 [ 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

换行

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

到

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

Answer 2

更改您的逻辑以根据他们所在的部分查找 children。

$('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();
  
  //...
});

在多个相似的项目组中定位事件

Targeting events in multiple similar groups of items

javascript

jquery

frontend

jquery-selectors