我遇到了 jQuery 变量的问题

Question

我有一系列列表项，其中包含用于存储信息的数据属性，例如：

...

我正在使用该信息来填充使用 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>'
    );

关于为什么这不能像我想要的那样工作的任何想法？

Answer 1

变量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();
});

Answer 2

您遇到了范围问题。在单击 li 之前不会创建变量，但您的 append 不在单击范围内。

另外，使用.data 代替attr。