javascript - Meteor:点击按钮时显示一些内容

Question

我在 Meteor 中遇到问题。

我想在单击按钮时显示和隐藏模板的一部分(例如显示问题的答案)。

问题是模板的这一部分是动态创建的，我只想揭示与按钮相关的答案。所以你不能只有一个模板助手，它需要返回“true”来显示答案，因为然后单击按钮，每个答案就会显示出来。

    <template name="cardList">
      {{#each card}}
        <div class="card">
          <h3>{{frontsideText}}</h3>
          <p class="answer">{{backsideText}}</p>
          <button class="btn btn-danger deleteButton">delete</button> 
          <button class="btn btn-default showButton">show Answer</button> 
        </div>
      {{/each}}
    </template>

我用 jQuery 尝试过，效果不错。像这样:

Meteor.startup(function () {
  $(".answer").hide();
}

Template.cardList.events({
"click .showButton": function(event) {
  $(event.target).prevAll(".answer").first().show();
}

但这不起作用，因为这样每个新添加的问题或任何内容都会显示答案，因为它们只是在启动时隐藏。我想我需要将 hide() 函数放在其他地方，但我不知道在哪里。

有没有办法只用 Meteor 而不用 jQuery 来解决这个问题？

Answer 1

有很多方法可以做到这一点，这里有两种:

<强>1。使用 meteor 您可以创建一个名为 card 的新模板，将其放入 {{#each card}} 中并使用以下事件。每当呈现新卡时，这都会隐藏答案。

Template.card.rendered = function(){
    this.$("p.answer").hide();
};

<强>2。更改您的代码片段以使用 JQuery问题是您以错误的方式隐藏元素。你不应该用js隐藏它，而应该用css隐藏它。这样它默认是隐藏的。

.card p.answer{
  display: none;  
}

无论哪种方式都会使您的点击事件代码正常工作。就我个人而言，我会结合我建议的选项:为卡片制作一个模板(在包含良好的模板上工作更干净/更容易)并调整 CSS，使其默认隐藏。

如果您还有其他问题，请告诉我