我需要你的帮助。
我正在创建一个重新组合多个选择和输入的组件,我从中获取值以将它们连接在预览区域的字符串中。每次这些输入/选择发生更改时都会更新该字符串。 当我处理一个元素、进行实验、设计样式等等时,它工作得很好。现在我必须将其复制到可能的无限数量,因此脚本必须相应地工作。问题是,当涉及到目标选择器“this”、“closest”之类的东西时,我毫无用处。我确信在获取值时我的逻辑是有缺陷的,正如您将在我编写的代码中看到的那样。
我将分享 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);
});
请帮帮我,我被困住了。谢谢。
最佳答案
改变你的逻辑,根据 child 所在的部分来查找 child 。
$('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();
//...
});
关于javascript - 定位多个相似项目组中的事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53047653/