Question

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

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

我正在使用该信息来填充使用jQuery注入的popover，我需要将信息存储到与每个列表项对应的变量中。我正在使用.click()将popover附加到列表项，然后将其淡入。但是当我尝试在函数中包含变量以限制其范围时，我的代码停止正常工作。这是我所拥有的一个粗略的例子：

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。

我遇到了jQuery变量的问题

2 个答案: