Эта ссылка не удается

Question

у меня есть этот кусок кода:

Drupal.behaviors.articleQuiz = (function(){ 
    var _attach = function(context){ 
      $('.question-container', context) 
        // .once() 
        .each(function(i, section){ 
          new ArticleQuiz($(section)); 
        }); 
    }; 

    return { 
      attach: _attach 
    }; 
})(); 

function ArticleQuiz($el){ 
    this.$el = $el; 
    this.answer = this.$el.data('answer'); 
    console.log('this.answer', this.answer); 
    this.quizLogic(); 
    return this; 
} 

ArticleQuiz.prototype.quizLogic = function(){ 
    var THIS = this; 

    $('.quiz-cols a').click(function(e) { 
     e.preventDefault(); 
     // exit if choice already made: users can't change their pick 
     if ($(this).parents('.quiz-cols').parent().find('.white-font').length) { 
      return; 
     } 

     // set class according to data-answer: 
     $(this).addClass('background-' + (THIS.answer === true ? 'green' : 'red')).addClass('white-font'); 
     console.log('answer', THIS.answer) 
    }); 
    return THIS; 
}; 

Drupal.behaviors.articleQuiz.attach($body); 

В функции ArticleQuiz() вы можете увидеть console.log('this.answer', this.answer);, который печатает это, и это совершенно правильно:

А потом почти при этом вы можете увидеть этот другой console.log('answer', THIS.answer), который находится в пределах функции click, и печатает только true. Это означает, что вы игнорируете другие 2 false, которые вы можете увидеть на картинке, которую я поставил выше.

Это HTML:

<div data-answer="true" class="question-container"> 
    <div> 
     <h2>1. First question.</h2> 
    </div> 
    <div class="quiz-cols"> 
     <div class="true-placeholder">...</div> 
    </div> 
    <div class="quiz-cols"> 
     <div class="false-placeholder">...</div> 
    </div> 
</div> 

<div data-answer="false" class="question-container"> 
    <div> 
     <h2>2. Second question.</h2> 
    </div> 
    <div class="quiz-cols"> 
     <div class="true-placeholder">...</div> 
    </div> 
    <div class="quiz-cols"> 
     <div class="false-placeholder">...</div> 
    </div> 
</div> 

<div data-answer="false" class="question-container"> 
    <div> 
     <h2>3. Third question.</h2> 
    </div> 
    <div class="quiz-cols"> 
     <div class="true-placeholder">...</div> 
    </div> 
    <div class="quiz-cols"> 
     <div class="false-placeholder">...</div> 
    </div> 
</div> 

И только для вас, чтобы знать, то this.$el = $el; указывает на div.question-container

Как вы видите, в этом HTML есть 3 div s с классом и атрибутов данных data-answer="true" class="question-container" , один из них - data-answer=true, а другой 2 - data-answer=false.

Так что мой вопрос. Почему в первом console.log я вижу три атрибута ответа на данные, которые появляются следующим образом: 1 true и 2 false. И в функции щелчка не имеет значения, на какой контейнер я нажимаю, он возвращает только 3 true и игнорирует false?

EDIT Ссылка работает правильно из функции щелчка.

Answer 1

Вы создаете обработчик кликов для всех вопросов каждый раз, когда вызывается this.quizLogic(), а не только для текущего вопроса. Вы можете исправить это, добавив контекст в селектор перед присоединением обработчика:

$('.quiz-cols a', this.$el).click(function(e) { 
    ...