$（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对象。

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

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

...尽管（从名称开始），但是如果它们不是以“可见”开头的，那么如何单击它们？

Answer 2

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

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

Answer 3

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

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

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

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

演示

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

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

演示

Answer 4

由于您要遍历包含.bio类的元素，因此无需提取ID并设置新类，因此可以这样操作：

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

希望这有效:)