2

現時点では、アプリケーション全体で再利用できるクリック イベントを作成しようとしています。

ナビゲーションの基本的な流れは、ユーザーがリンクをクリックし、そのリンクをクリックすると getJSON リクエストが取得され、JSON が解析されてサブナビゲーションに返されるというものですが、私が少し動けなくなっているポイントは、正しいアクセスにアクセスすることです。 JSON のオブジェクトをループしてサブナビゲーションを作成します。以下は私のコードです。

$(".primary a").on("click", function(e){

    var type = "data."+$(this).data('type');

    if($(".secondary").hasClass("bounceInUp")) {
        $(".secondary").removeClass("bounceInUp").addClass("bounceOutDown");
    }

    $.getJSON("js/data.json", function(data){

        var items = [];

        $.each(data, function(key, val){
            items.push('<li><a href="" data-name="'+ val +'"><img src="img/wood-nav.jpg" /></a></li>');
        });

        console.log(items);
        $(".secondary ul").empty();
        $(".secondary ul").html(items);
        $(".secondary").removeClass("bounceOutDown").addClass("animated bounceInUp");

    });
    e.preventDefault();

});

私のJSONは次のようになります。

{
    "doors" : {
        "1" : "door 1",
        "2" : "door 2",
        "3" : "door 3",
        "4" : "door 4",
        "5" : "door 5",
        "6" : "door 6",
        "7" : "door 7",
        "8" : "door 8",
        "9" : "door 9",
        "10": "door 10"
    },

    "handles" : {
        "1" : "handle 1",
        "2" : "handle 2",
        "3" : "handle 3",
        "4" : "handle 4",
        "5" : "handle 5",
        "6" : "handle 6",
        "7" : "handle 7",
        "8" : "handle 8",
        "9" : "handle 9",
        "10": "handle 10"
    },

    "worktops" : {
        "1" : "worktop 1",
        "2" : "worktop 2",
        "3" : "worktop 3",
        "4" : "worktop 4",
        "5" : "worktop 5",
        "6" : "worktop 6",
        "7" : "worktop 7",
        "8" : "worktop 8",
        "9" : "worktop 9",
        "10": "worktop 10" 
    },

    "floors" : {
        "1" : "floor 1",
        "2" : "floor 2",
        "3" : "floor 3",
        "4" : "floor 4",
        "5" : "floor 5",
        "6" : "floor 6",
        "7" : "floor 7",
        "8" : "floor 8",
        "9" : "floor 9",
        "10": "floor 10" 
    },

    "walls" : {
        "1" : "wall 1",
        "2" : "wall 2",
        "3" : "wall 3",
        "4" : "wall 4",
        "5" : "wall 5",
        "6" : "wall 6",
        "7" : "wall 7",
        "8" : "wall 8",
        "9" : "wall 9",
        "10": "wall 10" 
    }

}

ai はすでに何を試しましたか? ループの外側でデータオブジェクト名を作成してから渡そうとしました。たとえば、ドアをクリックするとvar type、「ドア」に = になります。その後、それを連結しますが、それdata.をループするときに彼を取得しますエラー、

キャッチされていない TypeError: data.doors で '9' を検索するために 'in' 演算子を使用することはできません

クリックしても必要なオブジェクトにアクセスできないようですが、方法はあるのでしょうか?

4

2 に答える 2

0

簡単なテストとしてこれを行いました：

var temp = {
"doors": {
    "1": "door 1",
    "2": "door 2",
    "3": "door 3",
    "4": "door 4",
    "5": "door 5",
    "6": "door 6",
    "7": "door 7",
    "8": "door 8",
    "9": "door 9",
    "10": "door 10"
},
"handles": {
    "1": "handle 1",
    "2": "handle 2",
    "3": "handle 3",
    "4": "handle 4",
    "5": "handle 5",
    "6": "handle 6",
    "7": "handle 7",
    "8": "handle 8",
    "9": "handle 9",
    "10": "handle 10"
},
"worktops": {
    "1": "worktop 1",
    "2": "worktop 2",
    "3": "worktop 3",
    "4": "worktop 4",
    "5": "worktop 5",
    "6": "worktop 6",
    "7": "worktop 7",
    "8": "worktop 8",
    "9": "worktop 9",
    "10": "worktop 10"
},
"floors": {
    "1": "floor 1",
    "2": "floor 2",
    "3": "floor 3",
    "4": "floor 4",
    "5": "floor 5",
    "6": "floor 6",
    "7": "floor 7",
    "8": "floor 8",
    "9": "floor 9",
    "10": "floor 10"
},
"walls": {
    "1": "wall 1",
    "2": "wall 2",
    "3": "wall 3",
    "4": "wall 4",
    "5": "wall 5",
    "6": "wall 6",
    "7": "wall 7",
    "8": "wall 8",
    "9": "wall 9",
    "10": "wall 10"
}
};

alert(temp.doors['9']);

これはうまくいきます。

もしそうなら、私はalert(temp.doors.9);得る

キャッチされていない SyntaxError: 予期しない数です

だから多分これをしようとしている：

temp["subObjectName"]["subSubObjectName"];

そして、JSONが有効であるため、機能するはずです!

于 2013-05-08T10:19:36.410 に答える
0

私が正しく理解している場合、type変数を反復処理しようとしています。これはstring.

var type = "data."+$(this).data('type');

代わりにこれを試してください：

var type = $(this).data('type');

$.getJSON("js/data.json", function(data){

        var items = [],
            data = data[type];

        $.each(data, function(key, val){
            items.push('<li><a href="" data-name="'+ val +'"><img src="img/wood-nav.jpg" /></a></li>');
        });
        //...
于 2013-05-08T10:26:52.550 に答える