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");
});

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

Answer 2

我认为你想在点击“.bio”时添加类可见，所以你不必编写这么复杂的代码。只需做

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

Answer 3

问题是您在.click()属性上调用了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

Answer 4

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

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

希望这有效：）

$（this）.attr（'id'）为.each返回未定义的错误jquery

4 个答案: