流星:点击按钮显示一些东西

Meteor: show something on button click

本文关键字：显示 按钮 流星      更新时间：2023-09-26

我在Meteor中遇到了一个问题。

当我点击按钮时，我想显示和隐藏模板的一部分（比如透露问题的答案）。

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

    <template name="cardList">
      {{#each card}}
        <div class="card">
          <h3>{{frontsideText}}</h3>
          <p class="answerswer">{{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来解决这个问题？

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

1.使用流星您可以制作一个名为card的新模板，将其放入｛｛#eachcard｝｝中，然后使用以下事件。每当呈现新卡时，这将隐藏答案。

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

2.更改代码段以使用JQuery问题是你用错误的方式隐藏了你的元素。你不应该用js隐藏它，而应该用css隐藏它。这样默认情况下它是隐藏的。

.card p.answer{
  display: none;  
}

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

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

相关文章：