Jquery 筛选数据时，多个Where未按预期工作

我想根据用户选中的复选框筛选产品数据

我在ProductController上使用abc（）方法进行测试，并通过将数组数据传递给它，将ajax请求从视图页面发送给它

ProductController

public function abc(Request $request, Product $products)
{
    $products = $products->newQuery();

    if ($request->has('category')) {
        $category = $request->get('category');
        $products = $products->whereHas('category', function($query) use($category) {
                                    $query->where('category', 'LIKE', $category.'%'); //query fire to get product as per category name
                                });
    }
    
    if ($request->has('subCategory')) {
        $products = $products->whereIn('sub_category_id',$request->subCategory);
    }

    if ($request->has('color')) {
        $color = $request->color;
        $products = $products->whereHas('colors', function($q) use($color){
                                    $q->whereIn('colors.id',$color);
                                });
    }
    
    return $products->get();
}

JQuery代码

$(document).ready(function(){

    var category = "{{ $category }}";
    $(document).on("click", ".sub-category-checkbox, .color-checkbox", function(){
        var subCategory = [];
        var color = [];
        $('#subCategoryFilter input[type="checkbox"]:checked').each(function() {
            subCategory.push($(this).val());
        });

        $('#colorFilter input[type="checkbox"]:checked').each(function() {
            color.push($(this).val());
        });
        $.ajax({
            url: "{{ route('abc') }}",
            type: "GET",
            data: { category : category, subCategory : subCategory, color : color },
            success: function(data){
                console.log(data);
            },
            error: function(error){
                console.log(error.responseJSON);
            }
        });
    });      

});

$(document).on("click", ".sub-category-checkbox, .color-checkbox", function(){
    ..code..
});

我正在测试它，所以我从控制器那里得到$category，它将这个$category传递给视图（show_product.blade.php），视图中有类别名称，例如男性、女性等

我面临的问题是，当用户选中子类别复选框（例如衬衫、t恤、牛仔裤）时，它会返回与该特定类别相关的产品

但当用户选中“颜色”复选框时，它将返回一个包含与所选颜色相关的产品的数组，并返回另一个包含与以前选择的检查字段相关的数据的数组。例如，在新页面加载时，它返回与已通过的类别（例如，Men）相关的所有产品。此时，当用户单击黑色复选框时，它返回一个数组，其中产品为黑色，另一个数组的产品类别为男性

---

我不知道为什么它返回两个数组数据。

好的，对我有用的是我更改了这一行

$(document).ready(function(){

    var category = "{{ $category }}";
    $(document).on("click", ".sub-category-checkbox, .color-checkbox", function(){
        var subCategory = [];
        var color = [];
        $('#subCategoryFilter input[type="checkbox"]:checked').each(function() {
            subCategory.push($(this).val());
        });

        $('#colorFilter input[type="checkbox"]:checked').each(function() {
            color.push($(this).val());
        });
        $.ajax({
            url: "{{ route('abc') }}",
            type: "GET",
            data: { category : category, subCategory : subCategory, color : color },
            success: function(data){
                console.log(data);
            },
            error: function(error){
                console.log(error.responseJSON);
            }
        });
    });      

});

$(document).on("click", ".sub-category-checkbox, .color-checkbox", function(){
    ..code..
});

到此

$(document).on("change", ".sub-category-checkbox, .color-checkbox", function(){
    ..code..
});

是个愚蠢的错误

$(document).ready(function(){

    var category = "{{ $category }}";
    $(document).on("click", ".sub-category-checkbox, .color-checkbox", function(){
        var subCategory = [];
        var color = [];
        $('#subCategoryFilter input[type="checkbox"]:checked').each(function() {
            subCategory.push($(this).val());
        });

        $('#colorFilter input[type="checkbox"]:checked').each(function() {
            color.push($(this).val());
        });
        $.ajax({
            url: "{{ route('abc') }}",
            type: "GET",
            data: { category : category, subCategory : subCategory, color : color },
            success: function(data){
                console.log(data);
            },
            error: function(error){
                console.log(error.responseJSON);
            }
        });
    });      

});

$(document).on("click", ".sub-category-checkbox, .color-checkbox", function(){
    ..code..
});