javascript - 定位多个相似项目组中的事件
问题描述
我需要你的帮助。
我正在创建重新组合多个选择和输入的组件,我从中获取值以将它们连接到预览区域中的字符串中。每次在这些输入/选择中发生更改时,都会更新此字符串。当我在一个元素上工作时,它工作得很好,试验,设计它和其他东西。现在我必须将它复制到可能无限的数量,因此脚本必须相应地工作。问题是,当涉及到目标选择器“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);
});
请帮帮我,我卡住了。谢谢你。
解决方案
改变你的线路
$(this).parent('.group').closest(".preview").empty().append(preview);
至
$(this).parents()
.filter(function() {
return (this.getAttribute('class') === 'container');
}).find('.preview').text(preview);
推荐阅读
- java - 从迭代器中删除数组中元素的最佳方法是什么?
- c# - 实体框架两次添加相同的实体
- c - HackerRank 上的对角线差
- sql - 引用表中没有主键或候选键
- python-3.x - 如何在 pytorch 中将模型中的每个参数的 require_grad 更改为 false?
- jackson - 以 CBOR 格式解码 VALUE_EMBEDDED_OBJECT 令牌类型
- python - 获取 numpy genfromtxt 的常量“(得到 12 列而不是 11 列)”错误。我已经尝试过其他帖子的解决方案,但没有一个有效
- json - 方法“加载”不起作用引导表
- vba - 无法设置 PageSetup 的特定属性
- javascript - 在 Javascript 中将对象作为参数传递 - 但不仅仅是一个参数,而是一个由变量构建的参数