1

私は本当にこれが単純な説明を持っていないことを望んでいます.それは多くの時間を失うことを意味するからです.締め切りの節約になります。お願いします。

私は次のことを達成しようとしています。

1.) JSON ファイルによって読み込まれるリンクのリストを作成する (動作)
2.) カテゴリ オブジェクトをビルダー関数に渡す li または a ごとにクリック イベントをバインドする (これが動作すると考えてください)
3.) ユーザークールなことをするオブジェクト

ただし、ビルダー関数に到達すると、奇妙な繰り返しが発生します。

category.json という私の JSON ファイルについて考えてみましょう。

[
{   
    "category": [
        {
            "id": "1",
            "title": "Title 1",
            "values": [
                {
                    "eg": [
                        {
                            "number": "12000000"
                        }
                    ]
                }
            ]
        }
    ]
},
{   
    "category": [
        {
            "id": "2",
            "title": "Title 2",
            "values": [
                {
                    "eg": [
                        {
                            "number": "37000000"
                        }
                    ]
                }
            ]
        }
    ]
},
{   
    "category": [
        {
            "id": "3",
            "title": "Title 3",
            "values": [
                {
                    "eg": [
                        {
                            "number": "37000000"
                        }
                    ]
                }
            ]
        }
    ]
}
]

そして、私が間違いなく間違っているところ、私のJS：

$(document).ready(function() {

//Get the necessary data from the JSON file
$.getJSON("categories.json", function(categories) {
    $.each(categories, function(c, category) {
        var link = new Nav(category.category);
    });
});

Nav = function(groups){
    $.each(groups, function(g, group) {
        //console.log(group);
        $('#categories').append('<li><a href="#">'+group.title+'</a></li>').data(group);
        $('#categories li a').on('click', function(){
            var builder = new Builder(group);
        });
        //$('#categories').append('<li><a href="#">'+this.title+'</a></li>');
        //$('#categories').append(
        //    $("<li/>", { id: links.id, text: links.title}).data('navver', links)
        //);

    });
};

Builder = function(builder){
    console.log(builder);
};

});

ご覧のとおり、コメントアウトされた他の「試行」がいくつかあります。したがって、最初に生成されたリンクをクリックすると、console.log に次の出力が表示されます。

Object { id="1", title="Title 1", values=[1]}
Object { id="2", title="Title 2", values=[1]}
Object { id="3", title="Title 3", values=[1]}

これは、最初の項目だけでなく、配列全体です。2 番目のリンクをクリックすると:

Object { id="2", title="Title 2", values=[1]}
Object { id="3", title="Title 3", values=[1]}

3 番目のリンクをクリックすると、次のようになります。

Object { id="3", title="Title 3", values=[1]}

私がしたいのは、対応するリンクをクリックすると正しいオブジェクトが返されることです。

私を助けてくれる時間のある賢い人はいますか？

4

2 に答える 2

1

イベントをバインドしている次の行を置き換える必要があります。

    $('#categories').append('<li><a href="#">'+group.title+'</a></li>').data(group);
    $('#categories li a').on('click', function(){
        var builder = new Builder(group);
    });

以下を使用します。

        var li = $('<li><a href="#">' + group.title + '</a></li>');
        $('#categories').append(li ).data(group);
        li.find('a').on('click', function() {
            var builder = new Builder(group);
        });

$('#categories li a')問題は、これらの要素の 1 つを追加するたびにセレクターを使用しているため、最初<a>に追加されたハンドラーは 3 回、2 回目は 2 回、3 回目は 1 回バインドされることです。

この変更を使用して、コードの変更されたバージョンを見つけることができます。

于 2012-10-25T22:09:00.873 に答える
0

あぁ…あそこだ。これは、イベントをすべての li に何度も何度もバインドしているためです。

このフィドルをチェックしてください

私の唯一の変化はこれでした。そのため、クリック イベントは、それらすべてではなく、新しく追加された li にバインドされます。

 $('#categories li:last a').on('click', function(){
            var builder = new Builder(group);
        });
于 2012-10-25T22:08:31.703 に答える