Javascript 此引用失败

我有一段代码：

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

在函数

articlequick（）

中，您可以看到一个

console.log（'this.answer'，this.answer）它打印了这个，并且完全正确：


然后几乎同时，您可能会看到另一个
控制台.log（'answer'，this.answer）
，它位于
单击
功能中，只打印
true
。这意味着忽略了我在上面的图片中可能看到的另外2个
false
s

这是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>


1.第一个问题。
...
...
2.第二个问题。
...
...
3.第三个问题。
...
...

只想让你知道，
这个。$el=$el指向
div.question-container

正如您在html中看到的，有3个
div
s具有class和data属性
data-answer=“true”class=“question-container”
，其中一个具有
data-answer=true
，另外两个具有
data-answer=false

所以我的问题是。为什么在第一个console.log中，我可以看到3个数据应答属性按原样出现：1个为真，2个为假。在click函数中，我单击的容器无关紧要，它只返回3
true
，忽略
false

编辑
引用在click函数之外正常工作。
每次调用此.quizLogic（）
时，您都会为所有问题创建一个click处理程序，而不仅仅是为当前问题。您可以通过在附加处理程序之前向选择器添加上下文来修复此问题：

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

每次调用
this.quizLogic（）
时，您都在为所有问题创建一个单击处理程序，而不仅仅是为当前问题。您可以通过在附加处理程序之前向选择器添加上下文来修复此问题：

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

那么，
articlequick
在哪里/如何实例化？@Pointy我添加了更多的代码

到

函数ArticleQuit（$el）

@KScandrett-那里不需要它，

ArticleQuit

在哪里/如何实例化？@Pointy我添加了更多的代码。我将移动

var THIS=THIS

到

函数articlequick（$el）

@KScandrett-那里不需要它