流星助手添加适当的css一秒钟，然后消失

Meteor helper adds appropriate css for a brief second and then disappears

本文关键字：一秒钟 css 然后 消失 添加 流星      更新时间：2023-09-26

如果用户通过下面的｛｛checkAnswer｝｝帮助程序点击了正确答案或错误答案，我将尝试显示某个类：

    <div class="question" {{attributes}}>
      <a href="#" data-value=0 class="checkOne upvote btn {{checkAnswer}}">A</a>
      {{answerOne}}
    </div>

用户提交一个创建提交的答案，然后最终检查该用户提交的内容是否正确。如果用户提交是正确的，它应该显示btn成功，不正确的应该是btn危险，否则应该是btn-primary。

Template.questionItem.helpers({   
checkAnswer: function() {
        var user = Meteor.user();
        var game = GameCollection.findOne({current: true});
        var currentQuestion = game.currentQuestion;
        var question = game.gameQuestions[currentQuestion];
        var correctAnswer = question.correctAnswer;
        var submission = Submissions.findOne({userId: user._id,
                                              gameId: game && game._id,
                                              currentQuestion: currentQuestion});
        if (submission && submission.submission === correctAnswer) {
            return 'btn-success';
        } else if (submission) {
            return 'btn-danger';
        } else {
            return 'btn-primary upvotable'
        }
    },

当我点击一个正确的提交时，它在几秒钟内从btn成功变为绿色（如果不正确，它在一秒钟内变为红色），但最终会进入btn初级。为什么它不停留在成功（或危险）？

上下文中的某些内容正在发生变化。Meteor数据上下文的构建方式使得您所做的所有"当前"检查都没有必要。相反，您可以使用this访问当前的数据上下文，这将大大简化您的代码。

首先，我会在服务器端检查提交是否正确，然后将其存储为提交本身的属性。然后，您可以执行一个简单的if...then来返回正确的引导程序类名。

这里有一个简单的例子：流星座

如果你想把JS文件快速地放到一个全新的项目中，这里有一个Gist。

您将注意到，在这两种情况下，您可以使用this._id或this.correct来访问正确/当前的数据上下文。希望这能帮助/让你走上正轨。

相关文章：