$ (это) .attr ('ID') возвращает неопределенное JQuery ошибки для .each

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

Проблема в том, что вы вызываете .click() в атрибут id, а не в объект jQuery.

$(this).attr('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 3

Я думаю, что вы хотеть добавьте класс, видимый всякий раз, когда вы нажимаете «.bio», поэтому вам не нужно писать такой сложный код. Просто сделать

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

Answer 4

Поскольку вы перебор Повсеместно элементы, которые содержат класс .bio нет никакой необходимости, чтобы извлечь идентификатор и установить новый класс, вы можете сделать это следующим образом:

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

Надеется, что это работает :)