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。使用流星您可以创建一个名为 card 的新模板，将其放入{{#each card}}并使用以下事件。每当呈现新卡时，这将隐藏答案。

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

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

.card p.answer{
  display: none;  
}

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

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

流星：点击按钮显示一些内容

1 个答案: