jquery - 仅当数组尚不存在时才推送到数组

Question

我有几个复选框，它们根据所选的复选框来过滤产品。当单击复选框并将产品 ID 添加到数组时，过滤器就会起作用。正如您所看到的，两个过滤器都有一些相同的 id，因此，如果它们单击多个输入框，我想确保 id 只被插入数组一次。例如。如果他们选择了 input.white 并选择了 input.greymelange 然后他们单击了过滤器 btn 我只想将重复的 id 推送一次。有什么办法可以做到这一点吗？

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");
    } 
});

HTML

 <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>

Answer 1

您可以使用 $.inArray() 和 $.each()

1) 将所有新值保存在数组中 deArray 。
2) 使用 $.each 迭代此数组然后查找是否在productIds中使用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)
        });

<强> JSFiddle