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 回答