仅当数组尚未出现时才推送到该数组
我有几个复选框，这些复选框根据选中的复选框筛选产品。当单击复选框并将产品ids添加到数组时，筛选器工作。如您所见，这两个过滤器都有一些相同的if，因此，如果它们单击多个输入框，我希望确保if只被推入数组一次。例如：如果他们选择了input.white，选择了input.greymelange，那么他们点击了filter-btn，我只想让重复的ids被推送一次。有什么办法我能做到吗？
JQUERY
var productIds = [""];
$(document).on('click', 'a.filter-btn', function(e){
$( ".listingTemplate" ).html("");
if ($('input.white').is(':checked')) {
productIds.push("4021401143741", "4021402266227");
}
if ($('input.greymelange').is(':checked')) {
productIds.push("4021401143741", "4021402266227","4021402266418", "4021401143796");
}
}); <input type="checkbox" id="white" class="white" value="white" />
<input type="checkbox" id="greymelange" class="greymelange" value="greymelange" />
<a href="#" class="filter-btn">filter</a>回答 6
Stack Overflow用户
发布于 2013-12-09 11:50:10
您可以使用$.inArray()和$.each()
1)将所有新值保存在数组deArray.中
2)使用productIds迭代这个数组，然后使用inArray()查找它是否在inArray()中。
if ($('input.greymelange').is(':checked')) {
var deArray = ["4021401143741", "4021402266227", "4021402266418", "4021401143796"];
$.each(deArray, function (i, j) {
if ($.inArray(j, productIds) == -1) {
productIds.push(j);
}
});
}建议：不会在数组中声明空字符串。
var productIds = [""]; //considered as an string. This will affect
//when you check length, now it is 1
var productIds = []; //length is 0最后，
var productIds = [];
$(document).on('click', 'a.filter-btn', function (e) {
$(".listingTemplate").html("");
if ($('input.white').is(':checked')) {
var dArray = ["4021401143741", "4021402266227"];
$.each(dArray, function (i, j) {
if ($.inArray(j, productIds) == -1) {
console.log(j)
productIds.push(j);
}
})
}
if ($('input.greymelange').is(':checked')) {
var deArray = ["4021401143741", "4021402266227", "4021402266418", "4021401143796"];
$.each(deArray, function (i, j) {
if ($.inArray(j, productIds) == -1) {
productIds.push(j);
}
})
}
console.log(productIds)
});Stack Overflow用户
发布于 2013-12-09 12:02:15
如果您只有一组固定的产品ID，为什么需要一个可变长度的数组来存储检查哪个产品ID？
我建议也许建立一个包含你可以使用的逻辑的对象。
function productMapper() {
var colorToIdMap = {
'white' = [
'4021401143741',
'4021402266227'
],
'greymelange' = [
'4021401143741',
'4021402266227',
'4021402266418',
'4021401143796'
]
};
var selectedIds = [];
function selectIds(color) {
this.selectedIds = [];
var colorIds = this.colorToIdMap[color];
for(i = 0; i < colorIds.length; i++) {
var currentId = colorIds[i];
if(this.selectedIds.indexOf(currentId) === -1) {
this.selectedIds.push(currentId);
}
}
}
function getSelectedIds() {
return this.selectedIds;
}
}用法可能是：
var selectedProductMap = new productMapper();
$(document).on('click', 'a.filter-btn', function(e){
$( ".listingTemplate" ).html("");
if ($('input.white').is(':checked')) {
selectedProductMap.selectIds('white');
}
if ($('input.greymelange').is(':checked')) {
selectedProductMap.selectIds('greymelange');
}
});这里的好处是，当您添加新颜色和产品Id时，只需将它们添加到该类中就很容易了(或者让类的这一部分动态地从数据库中构建)。
我还建议考虑对HTML进行重构，这样您就不需要为每个颜色选项添加一个if条件。可能会给所有复选框输入一个公共类，并从input属性导出颜色值。像这样的东西可能会出现在onclick函数中：
$('input.filterCheckbox').each(function(index.value)) {
var $currentCheckbox = $(this);
if($currentCheckbox.is(':checked')) {
selectedProductMap.selectIds($currentCheckbox.val());
}
}
var currentlySelectedIds = selectedProductMap.getSelectedIds();Stack Overflow用户
发布于 2013-12-09 11:47:43
在添加到列表之前，您需要检查项目是否包含。不幸的是，这并不像应该的那样简单，但是下面的堆栈解释说：如何检查数组是否包括JavaScript中的对象？
由于您将其标记为jQuery，下面的代码(示例)可能适用于您：
if ($.inArray("4021401143741", productIds) === -1)
productIds.push("4021401143741");有关此调用请看这里的更多信息。祝好运!
https://stackoverflow.com/questions/20479310
复制![[答疑]是增加了一个功能还是增加了一个系统](https://ask.qcloudimg.com/http-save/yehe-6288414/i8wx1sd6b6.png)
相似问题
.htaccess从非www Http子文件夹重定向到www https子文件夹
.htaccess子文件夹从http://重定向到www
从域www到no-www到子文件夹
htaccess重写非www子文件夹到www子文件夹重定向到www根目录
htaccess将非www子文件夹重定向到www子文件夹。
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
