Блог

В настоящее время я изучаю JavaScript с помощью книги О’Рейли «Learning Web Application Development». В примере мы создаем веб-сайт с использованием HTML и CSS, который включает в себя 3 вкладки, которые должны быть выбраны и стать «активной» вкладкой. В книгах утверждается, что следующие два способа написания кода табуляции эквивалентны:

1)

 var main = function() {
    "use strict";
    var tabNumber;
    for (tabNumber=1;tabNumber<=3;tabNumber  ) {
        var tabSelector = ".tabs a:nth-child(" tabNumber ") span";
        $(tabSelector).on("click",function() {
           $(".tabs span").removeClass("active");
           $(tabSelector).addClass("active");
           $("main .content").empty();
           return false;
        });
    }  
}
$(document).ready(main);
  

2)

 var main = function() {
    "use strict";
    $(".tabs a span").toArray().forEach(function(element) {

        $(element).on("click", function() {
            console.print("this element: "   element);
            $(".tabs span").removeClass("active");
            $(element).addClass("active");
            $("main .content").empty();
            return false;
        });
    });
}
$(document).ready(main);
  

Однако они не выдают одинаковый результат. Версия, использующая forEach, работает корректно, так что, когда я нажимаю на одну из вкладок, внимание перемещается на эту вкладку, и она подсвечивается. Однако в версии, использующей цикл for, всякий раз, когда я нажимаю на любую вкладку, внимание всегда перемещается на последнюю вкладку. Чтобы подтвердить происходящее, я распечатал имя элемента внутри прослушивателя событий обоими методами, используя всего 3 вкладки. И используя цикл for, независимо от того, на какую вкладку я нажимаю, я получаю ответ

 "this element: .tabs a:nth-child(3) span"
  

Может кто-нибудь, пожалуйста, помочь мне объяснить, почему это происходит? Почему выходные данные отличаются при использовании for или forEach? И почему при использовании for он всегда передает последний элемент tabs прослушивателю событий?

Похоже, здесь есть проблема:

 var tabSelector = ".tabs a:nth-child(" tabNumber ") span";
$tabSelector.on("click",function(){
  

Вы создали переменную, у которой в начале нет $ , затем прикрепили событие к переменной (не уверен, на что оно будет ссылаться) с $ в начале.

Я считаю, что это должно быть изменено на это:

 $(tabSelector).on("click",function(){
  

В for циклическом решении вы устанавливаете tabSelector несколько раз следующим образом:

 var tabSelector = ".tabs a:nth-child(" tabNumber ") span";
  

В конечном итоге для этого селектора будет установлен последний tabNumber, который всегда будет вызываться при создании ссылки на него:

 $(tabSelector).addClass("active");
  

Чтобы избежать этого, замените его на this , который будет отличаться для каждого из них:

 $(this).addClass("active");
  

Демонстрация JS Fiddle