0

ユーザーから 2 つの入力を取得しています。

  1. 範囲
  2. 時間

これらをもとに、その時点でその地域で利用可能なレストランを表示しています。また、それらのレストランが提供するすべての料理をチェックボックスとして表示したいと考えています。次に、ユーザーはそれらのチェックボックスから選択でき、レストランも料理に応じてフィルタリングできます。

私が直面している問題は、それらのレストランが提供するすべての料理を表示した後、それらの料理に基づいて結果を変更する方法を見つけることができないことです.

xmlhttpreqこれは2つのオブジェクトを作成することで解決できますか? 提案をお願いします。

4

1 に答える 1

0

元のオブジェクトに各レストランの料理に関する関連情報が含まれていることを確認してください。その後、フィルタに特定のオプションが含まれているかどうかに基づいて、ユーザーに表示するオプションをフィルタリングできます。オプションの非表示/表示にはサーバーの関与が必要ないため、別の AJAX リクエストは必要ありません。

この jsfiddle デモは、レストラン リストを単純にフィルタリングする 1 つの方法を示しています (小さな jQuery を使用)。ただし、DOM 操作はかなり基本的なものであり、changejQuery を使用したくない場合は、ネイティブ JS でイベントを簡単にエミュレートできます。

var time = "8:00pm";
var parameters = {
    area: 1,
    time: time
};

// Initially only r1, r2, r5 shown
var restaurants = {
    r1: { name:"One", cuisine: "Thai", area: "1", time: time },
    r2: { name:"Two", cuisine: "Chinese", area: "1", time: time},
    r3: { name:"Three", cuisine: "American", area: "2", time: time },
    r4: { name:"Four", cuisine: "Mediterranean", area: "1", time: "9:00pm"},
    r5: { name:"Five", cuisine: "American", area: "1", time: time }
};

$(document).ready(function() {
    parameters.cuisine = $('input[name="cuisine"]:checked').map(function() {
        return $(this).val();
    }).toArray();

    writeRestaurants();

    $('input[name="cuisine"]').change( function(){
        var $this = $(this);
        var a = parameters.cuisine;
        if( $this.is(':checked') ) {
            a.push($this.val());           
        }
        else {
            var k = a.indexOf($this.val());
            a.splice(k, 1);
        }   
        writeRestaurants();
    });
});

function writeRestaurants() {
    $('#restaurants').empty();
    for (var i in restaurants ) {
        var include = true;
        for (var param in parameters) {
            if( param == 'cuisine' ){
                if (parameters[param].indexOf(restaurants[i][param]) < 0) {
                    include = false;
                }
            }
            else if (restaurants[i][param] != parameters[param]) {
                include = false;
            }
        }
        if (include) {
            $('#restaurants').append('<p>'+restaurants[i].name+'</p>');
        }
    }
}​
于 2012-07-28T23:18:19.720 に答える