0

誰かが私を正しい方向に向けてくれることを願っています。私は主に PHP 開発者ですが、私たちが受け取る AJAX 作業要求の数が増えているため、jquery と javascript についてもっと理解しようとしています。

基本的に、問題なく動作するサイドバー フィルターがあります。それは3つのことに基づいています。グループ、カテゴリ、およびサブカテゴリ。たとえば、ブーツをカテゴリ、レザー (タイプ) をサブカテゴリ、ブラック (色) を 3 次フィルターにします。現時点ではGETフォームに基づいて動作します。ただし、代わりにライブフィルターを使用して、をクリックするcheckboxと、クエリに基づいて結果が更新されるようにします。このためのすべての 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 に答える