0

次のような情報を格納するためのデータ属性を含む一連のリスト項目があります。

<li data-name="John Doe" data-age="42" data-gender="male">...</li>

その情報を使用して、jQuery を使用して挿入されたポップオーバーを設定しています。各リスト項目に対応する変数に情報を保存する必要があります。ポップオーバーをリスト項目に追加してフェードインするために使用.click()しています。しかし、関数に変数を含めてスコープを制限しようとすると、コードが正しく動作しなくなりました。これが私が持っていたものの大まかな例です：

var person = $('#list li');

person.click( function() {
    var name = $(this).attr('data-name'),
        age = $(this).attr('data-age'),
        gender = $(this).attr('data-gender');

    $(this).children('div.foo').fadeIn();
})
    .append(
        '<div class="foo">
             <dl>
                 <dt>Name:</dt>
                 <dd>' + name + '</dd>
                 <dt>Age:</dt>
                 <dd>' + age + '</dd>
                 <dt>Gender:</dt>
                 <dd>' + gender + '</dd>
             </dl>
         </div>'
    );

なぜこれが私が望むように機能しないのかについてのアイデアはありますか?

4

2 に答える 2

2

変数name, age and genderは関数のスコープにのみ表示されるclickため、その下の追加ブロックでは使用できません。

var person = $('#list li');

person.click( function() {
    var name = $(this).attr('data-name'),
        age = $(this).attr('data-age'),
        gender = $(this).attr('data-gender');
    $(this).append( '<div class="foo">
             <dl>
                 <dt>Name:</dt>
                 <dd>' + name + '</dd>
                 <dt>Age:</dt>
                 <dd>' + age + '</dd>
                 <dt>Gender:</dt>
                 <dd>' + gender + '</dd>
             </dl>
         </div>');
     $(this).children('div.foo').fadeIn();
});
于 2012-02-14T04:15:52.197 に答える
0

範囲の問題があります。liがクリックされるまで変数は作成されませんappendが、クリックの範囲外です。

また、.dataの代わりに使用しattrます。

于 2012-02-14T04:16:32.793 に答える