jQuery - 为每个关联的数据属性添加活动状态

Question

在代码中，当您单击按钮时，我为每个项目添加一个唯一标识符。在每input我都有一个data-type，该在该菜单的data-id中具有相同名称的关联.menu。

此代码将唯一标识符正确添加到输入的data-type：

$(this).attr("data-type", $(this).attr("data-type") + "_" + uniqueId);

但是此代码返回菜单data-idundefined_x，并且不获取菜单的 data-id 值：

$(this).closest(".item").find(".menu, .menu__wrap").attr("data-id", $(this).attr("data-id") + "_" + uniqueId);

如何将data-id的函数更改为不返回undefined，而是返回正确的值，就像input上的data-type一样？

示例：如果我克隆该项目 3 次，我希望data-type="shapes_3""形状"输入(代码当前这样做(，但随后我也希望 "形状"菜单要获取：data-id="shapes_3"以便它们匹配和 活动类函数将正常工作。

var uniqueId = 1;
$(function() {
$(".clone").click(function() {
var copy = $("#item").clone(true);
var formId = "item_" + uniqueId;
copy.attr("id", formId);
$("#list").append(copy);
$("#" + formId)
.find("input,select")
.each(function() {
$(this).attr("id", $(this).attr("id") + "_" + uniqueId);
$(this).attr("data-type", $(this).attr("data-type") + "_" + uniqueId);
$(this).closest(".item").find(".menu, .menu__wrap")
.attr("data-id", $(this).attr("data-id") + "_" + uniqueId);
$(this)
.closest("label")
.attr("for", $(this).attr("id"));
});
uniqueId++;
});
});
$(document).ready(function() {
$(".clone").trigger("click");
$(".clone").trigger("click");
$(".clone").trigger("click");
});
$('input[name="studio"]').change(function() {
var id = $(this).data("type");
$(".menu[data-id=" + id + "]").toggleClass("active", this.checked);
$(".menu__wrap[data-id=" + id + "]").toggleClass("active", this.checked);
});
$('input[name="studio"]').change();

.menu {
height: 30px;
border: 1px solid
}
.active {
background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="clone">Clone</button>
<div id="list">
<div class="item" action="" id="item">
<div class="menu" data-id="colors">
<div class="menu__wrap" data-id="colors"></div>
</div>
<div class="menu" data-id="shapes">
<div class="menu__wrap" data-id="shapes"></div>
</div>
<div class="menu" data-id="animals">
<div class="menu__wrap" data-id="animals"></div>
</div>
<div class="input--studio">
<label for="blue" data-type="colors">Colors
<input type="checkbox" id="blue" name="studio" data-type="colors"/>
</label>
</div>
<div class="input--studio">
<label for="red" data-type="colors">Shapes
<input type="checkbox" id="red" name="studio" data-type="shapes"/>
</label>
</div>
<div class="input--studio">
<label for="dog" data-type="animals">Animals</label>
<input type="checkbox" id="dog" name="studio" data-type="animals" />
</div>
</div>
</div>

Answer 1

如果我确切地了解您的需求，您可以通过这种方式解决问题。

// get the original data-type from current input before it is modified
var dataType = $(this).attr("data-type");
$(this).attr("data-type", $(this).attr("data-type") + "_" + uniqueId);
// look for the closest menu item with the same data-id value and update it
$(this).closest(".item").find(".menu__wrap[data-id='" + dataType + "']")
.attr("data-id", dataType + "_" + uniqueId);

Answer 2

您可以尝试移动该行：

$(this).closest(".item").find(".menu, .menu__wrap")
.attr("data-id", $(this).attr("data-id") + "_" + uniqueId);

到事件外部并将其替换为

copy.find(".menu, .menu__wrap").each(function () {
$(this).attr("data-id", $(this).attr("data-id") + "_" + uniqueId);
});

var uniqueId = 1;
$(function() {
$(".clone").click(function() {
var copy = $("#item").clone(true);
var formId = "item_" + uniqueId;
copy.attr("id", formId);
$("#list").append(copy);
$("#" + formId)
.find("input,select")
.each(function() {
$(this).attr("id", $(this).attr("id") + "_" + uniqueId);
$(this).attr("data-type", $(this).attr("data-type") + "_" + uniqueId);

$(this)
.closest("label")
.attr("for", $(this).attr("id"));
});

copy.find(".menu, .menu__wrap").each(function () {
$(this).attr("data-id", $(this).attr("data-id") + "_" + uniqueId);
});

uniqueId++;
});
});
$(document).ready(function() {
//  $(".clone").trigger("click");
//  $(".clone").trigger("click");
//  $(".clone").trigger("click");
});
$('input[name="studio"]').change(function() {
var id = $(this).data("type");
$(".menu[data-id=" + id + "]").toggleClass("active", this.checked);
$(".menu__wrap[data-id=" + id + "]").toggleClass("active", this.checked);
});
$('input[name="studio"]').change();

.menu {
height: 30px;
border: 1px solid
}
.active {
background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="clone">Clone</button>
<div id="list">
<div class="item" action="" id="item">
<div class="menu" data-id="colors">
<div class="menu__wrap" data-id="colors"></div>
</div>
<div class="menu" data-id="shapes">
<div class="menu__wrap" data-id="shapes"></div>
</div>
<div class="menu" data-id="animals">
<div class="menu__wrap" data-id="animals"></div>
</div>
<div class="input--studio">
<label for="blue" data-type="colors">Colors
<input type="checkbox" id="blue" name="studio" data-type="colors"/>
</label>
</div>
<div class="input--studio">
<label for="red" data-type="colors">Shapes
<input type="checkbox" id="red" name="studio" data-type="shapes"/>
</label>
</div>
<div class="input--studio">
<label for="dog" data-type="animals">Animals</label>
<input type="checkbox" id="dog" name="studio" data-type="animals" />
</div>
</div>
</div>