从动态数组中删除项目
问题描述:
我有一些列表和复选框作为过滤器,我需要做的是当您选择一个复选框时,将该值添加到标题旁边的小标签,并取消选中时,然后删除值。从动态数组中删除项目
我做这个工作,将每个值保存到一个数组中,当取消选中时尝试查找该值的索引并删除,但我认为我与数组中的位置有冲突。如果您逐个单击,然后逐个删除,那么它可以工作,但如果您单击它们并取消选中第一个,它将删除所有内容。有一个线索如何解决它,但不知道如何进行。
请帮忙吗? https://jsfiddle.net/panconjugo/qsgwvp63/2/
$(function() {
$(".filter-nav > li").each(function(index) {
var brands = [];
$(this).find("input:checkbox").each(function(index) {
$(this).on("click", function() {
if ($(this).is(":checked")) {
console.log("adding: " + index);
brands.push($(this).val());
console.log(brands);
$(this).parent().parent().prev().find(".selected-group").text(brands.join(", "));
} else {
console.log("removing:" + index);
brands.splice(index);
console.log(brands);
$(this).parent().parent().prev().find(".selected-group").text(brands.join(", "));
}
});
});
});
});
答
相反维持由添加/移除项的数组的,这是非常非常简单钩到change
事件的复选框的,然后建立利用map()
一个新的数组,它包含所选择的数据该组中的项目。然后,您可以将它们结合在一起,并根据需要显示文本。试试这个:
$('.filter-nav input:checkbox').on("change", function() {
var $parent = $(this).closest('.filter-nav > li');
var items = $parent.find('input:checkbox:checked').map(function() {
\t return this.value;
}).get();
$parent.find('.selected-group').text(items.join(', '));
});
.filter-nav {
list-style: none;
padding: 0;
}
.filter-nav li {
line-height: 40px;
}
.filter-nav > li > h3 {
background-color: #222;
color: white;
padding-left: 20px;
cursor: pointer;
}
.selected-group {
color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filter-nav">
<li>
<h3>Brand <small class="selected-group"></small></h3>
<ul>
<li>
<label for="brand1">Brand1</label>
<input type="checkbox" id="brand1" value="Brand 1">
</li>
<li>
<label for="brand1">Brand2</label>
<input type="checkbox" id="brand2" value="Brand 2">
</li>
<li>
<label for="brand1">Brand3</label>
<input type="checkbox" id="brand3" value="Brand 3">
</li>
</ul>
</li>
<li>
<h3>Size <small class="selected-group"></small></h3>
<ul>
<li>
<label for="xs">XS</label>
<input type="checkbox" id="xs" value="xs">
</li>
<li>
<label for="m">M</label>
<input type="checkbox" id="m" value="m">
</li>
<li>
<label for="l">L</label>
<input type="checkbox" id="l" value="l">
</li>
</ul>
</li>
<li>
<h3>Color <small class="selected-group"></small></h3>
<ul>
<li>
<label for="blue">Blue</label>
<input type="checkbox" id="blue" value="blue">
</li>
<li>
<label for="green">Green</label>
<input type="checkbox" id="green" value="green">
</li>
<li>
<label for="red">Red</label>
<input type="checkbox" id="red" value="red">
</li>
</ul>
</li>
</ul>
答
更改代码brands.splice(index);
到brands.splice(brands.indexOf($(this).val()), 1);
首先你要找到数组项目索引,然后使用该索引从数组中删除
为什么downvote?是一个工作的例子不够? –
哎呀!是我吗? –
只有当你点击这篇文章左上角的向下箭头 –