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

Question

我有以下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/

Answer 1

在这一行之后：

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

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

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

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

...although (从名字开始工作)，如果它们一开始不是“可见的”，你怎么能点击它们呢？

Answer 2

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

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

Answer 3

问题是，您是在id属性上调用id，而不是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