0

JSONファイルからコンテンツを読み取り、一意のIDでdivに追加しています。jqueryのスライドダウンエフェクトを各divに呼び出す必要があります。ケースを考えてみましょう。（divid = A1）をクリックすると、下にスライドして（div id = B1）が表示されます。このようにして、IDがA（1..N）とB（1..N）のdivが表示されます。 。

var i=1;
$.each(items, function (index, item) {

    $(document).ready(function(){
        $("#A"+i).click(function(){
        $("#B"+i).slideToggle();
        });
    });

    $("#allContents").append('<div id="A'+i+'">' + item.Name + '</div>');
    $("#allContents").append('<div id="B'+i+'">' + item.Details + '</div>');
    i++;
});

これは私が導き出すことができる最も近いコードですが、機能していません。誰かが私がこのことを機能させるためのより良い方法を修正または提案するのを手伝ってくれるなら、それは素晴らしいことです。どうもありがとう！

4

1 に答える 1

1 
$('#allContents').on('click', 'div[id^=A]', function() {
    $('div#B' + this.id.replace('A','')).slideToggle();
});

少し説明

  • div[id^=A]で始まるものdivを指摘してください。idA
  • this.ididクリックされた要素の を取得します。
  • this.id.replace('A','')を から置き換えAて、idのインデックスに等しい数値インデックスを取得しますB。
  • $('div#B' + this.id.replace('A',''))elementid=B1などを指しid=B2ます。

完全なコード

// you can bind event handler outside ot loop
$('#allContents').on('click', 'div[id^=A]', function() {
    $('div#B' + this.id.replace('A','')).slideToggle();
});

$.each(items, function(index, item) {
    $("#allContents").append('<div id="A' + i + '">' + item.name + '</div>');
    $("#allContents").append('<div id="B' + i + '">' + item.Details + '</div>');
    i++;
});

作業サンプル

ノート

動的に作成divしA(1..N)ているB(1..N)ため、デリゲート イベント ハンドラー (別名ライブ イベント) が必要です。

.on()デリゲート イベントの jQuery の構文は次のようになります。

$(container).on(eventName, target, handlerFunction)
于 2012-06-22T06:54:24.637 に答える