针对多个类似项目组中的事件

Question

我需要你的帮助。

我正在创建一个组件，它重新组合多个选择和输入，从中我可以获得值，并将它们连接到预览区域中的字符串中。每当这些输入/选择发生变化时，就会更新此字符串。当我在一个元素上工作时，它工作得很好，实验，造型等等。现在我必须将它复制到可能无限的数量中，所以脚本必须相应地工作。问题是，当涉及到"这个"、"最接近"之类的目标选择时，我毫无用处。我确信，当你在我写的代码中看到值时，我的逻辑是有缺陷的。

我会分享JSFiddle，我想它会更容易理解。如果没有，我将编辑这篇文章并直接分享。

也许我应该声明一个包含目标的变量，比如[var route=$(this(.Pparent((.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);