$(this).attr('id') 为 .each 返回未定义的错误 jquery答案

【问题标题】：$(this).attr('id') returns undefined error jquery for .each$(this).attr('id') 为 .each 返回未定义的错误 jquery
【发布时间】：2014-10-02 11:31:03
【问题描述】：

我有以下 HTML：

<div class="bio" id="bio-1">Test 1</div>
<div class="bio" id="bio-2">Test 2</div>

和 Jquery：

 $(document).ready(function () {
        var bio = $('.bio');
        bio.each(function (){
            var bioId = $(this).attr('id');
            bioId.click(function() {            
                    $(this).addClass('visible');
             });
         });
 });

但我在控制台中收到一条错误消息，提示 bioId 未定义。有什么想法吗？ http://jsfiddle.net/xm679zbe/

【问题讨论】：

无论bioId有什么值，它肯定不是一个jQuery对象，所以你不能在上面调用click。我想你只想要$('.bio').click(function() { $(this).addClass('visible'); });。没有必要让它变得更复杂。
"...我在控制台中收到一个错误，提示 bioId 未定义..." 我怀疑它告诉您 bioId.click 未定义，而不是比bioId。 :-)

标签： jquery undefined each attr

【解决方案1】：

在这一行之后：

var bioId = $(this).attr('id');

bioId 将保存一个字符串或undefined。它不会引用 jQuery 对象。

如果您的目标是在单击任何.bio 元素时为其添加visible 类，那么：

$(".bio").click(function() {
    $(this).addClass("visible");
});

...虽然（根据名称），如果它们一开始不是“可见的”，你怎么能点击它们？

【讨论】：

Fiddle 包含定义 visible 类样式的 CSS（它只是一种不同的颜色，但它是一个有趣的名称选择）。
@AstroCB：谢谢。可惜信息不在问题中。 :-)

【解决方案2】：

我认为您希望在单击“.bio”时添加可见的类，因此您不必编写如此复杂的代码。干脆做

$(".bio").on("click",function(){
$(this).addClass("visible");
})

【讨论】：

【解决方案3】：

问题是您在id 属性上调用.click()，而不是jQuery 对象。

$(this).attr('id'); 将以字符串的形式为您提供元素的 ID，您无法在其中添加事件侦听器。

将bioId设置为迭代中的实际对象：

$(document).ready(function () {
    var bio = $('.bio');
    bio.each(function () {
        var bioId = $(this);
        bioId.click(function () {
            $(this).addClass('visible');
        });
    });
});

Demo

或者，您可以完全删除变量：

$('.bio').click(function () {
        $(this).addClass("visible");
    });
});

Demo

【讨论】：

【解决方案4】：

由于您正在遍历包含 .bio 类的元素，因此无需提取 id 并设置新类，您可以这样做：

$(document).ready(function () {
        var bio = $('.bio');
        bio.each(function (){
            $(this).click(function() {            
                    $(this).addClass('visible');
             });
         });
 });

希望这可行:)

【讨论】：