0

我希望有人能指出我正确的方向。我主要是一名 PHP 开发人员，但由于我们收到越来越多的 AJAX 工作请求，我真的想更多地了解 jquery 和 javascript。

基本上我有一个可以正常工作的侧边栏过滤器。它基于 3 件事。一个组、类别和子类别。例如，Boots 作为类别，Leather（类型）作为子类别，Black（颜色）作为第三级过滤器。目前它基于GET表单工作。但是，我想改用实时过滤器，以便当他们单击 acheckbox时，它会根据查询更新结果。我可以为此编写所有 PHP，但我正在努力通过 jQuery 将数据汇总在一起。我看过使用 jQuery.each和.change.

有 3 组复选框，它们都基于数组。再举一个例子：category[], subcategory[], tertiary[].

在此先感谢您的帮助。

一些示例 HTML

<input id="$ProdCatLabel" class="side_filter_checkbox" name="ProdCatFil[]" type="checkbox" value="$ProdCat">
<input id="$ProdSubCatLabel" class="side_filter_checkbox" name="ProdSubCatFil[]" type="checkbox" value="$ProdSubCat">
<input id="$BrandingLabel" class="side_filter_checkbox" name="BrandFil[]" type="checkbox" value="$Branding">

我的尝试：

var prodcats = $('side_filter_prodcats[name="ProdCatFil[]"]:checked')
                   .map(function() { return $(this).val() })
                   .get()
                   .join(",");

var prodsubcats = $('side_filter_prodsubcats[name="ProdSubCatFil[]"]:checked')
                   .map(function() { return $(this).val() })
                   .get()
                   .join(",");

$.ajax({
    type: "POST",
    url: "[ENTER PHP URL HERE]",   
    data: "ProdCats=" + prodcats + "ProdSubCats=" + prodsubcats,                                        
    success: function(msg) { $(".content_area").html(msg); }
});

我在这里吠叫正确的树吗？

4

1 回答 1

2

好的，假设您的复选框具有类category,subcategory和tertiary. 您可以将单击事件处理程序附加到调用函数以加载正确数据的每个组，将复选框值和类或数据属性作为参数传递给函数。

// Your main DOM ready function
$(document).ready(function() {

    // Checkboxes click function
    $('input[type="checkbox"]').on('click',function(){
        // Here we check which boxes in the same group have been selected
        // Get the current group from the class
        var group = $(this).attr("class");
        var checked = [];

        // Loop through the checked checkboxes in the same group
        // and add their values to an array
        $('input[type="checkbox"].' + group + ':checked').each(function(){
            checked.push($(this).val());
        });

        refreshData(checked, group);
    });

    function refreshData($values, $group){
        // Your $values variable is the array of checkbox values
        // ie. "boot", "shoe" etc
        // Your $group variable is the checkbox group
        // ie. "category" or "subcategory" etc.
        // Now we can perform an ajax call to post these variable to your php
        // script and display the returned data

        $.post("/path/to/data.php", { cats: $values, type: $group }, function(data){
            // Maybe output the returned data to a div
            $('div#result').html(data);
        });
    }

});

以下是复选框单击功能的示例：http: //jsfiddle.net/F29Mv/1/

于 2012-12-07T14:22:29.203 回答