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，其中包含类和数据属性data-answer="true" class="question-container"，其中一个属于data-answer=true，另外两个属于data-answer=false 。

所以我的问题。为什么在第一个console.log中我可以看到3个数据应答属性：1真和2假。在点击功能中，我点击的容器无关紧要，它只返回3 true并忽略false？

修改该参考在点击功能之外正常工作。

Answer 1

每次调用this.quizLogic()时，您都会为所有问题创建一个点击处理程序，而不仅仅针对当前问题。您可以通过在附加处理程序之前向选择器添加上下文来解决此问题：

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

这个参考是失败的

1 个答案: