流星：点击按钮显示一些内容 [英] Meteor: show something on button click

问题描述

我在Meteor中遇到了问题。

I got a problem in Meteor.

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

I want to show and hide a part of a template when I click a button (Like revealing a answer to a question e.g).

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

The problem is that this part of the template is created dynamically and I just want to reveal the answer that is correlated to the button. so you cant just have a template helper, that needs to return "true" to show the answer, because then on a button click every answer is revealed.

    <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，它有点好用。类似于：

I tried it with jQuery, which worked kind of. something like:

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

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

但这不是工作，因为然后每个新添加的问题或任何有答案显示，因为它们只是在启动时隐藏。我想我需要将hide（）函数放在其他地方，但我不知道在哪里。

But this doesnt work, because then every new added Question or whatever has the answer revealed, because they are just hidden on startup. I guess I need to put the hide() function somewhere else, but I dont know where.

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

And is there a way to solve this problem with just Meteor and no jQuery?

推荐答案

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

There are numerous ways to do this, here are two:

1.使用meteor
你可以创建一个名为卡，将其放入{{#each card}}并使用以下事件。这将在每张新卡出现时隐藏答案。

1. Using meteor You could make a new template called card, put it in the {{#each card}} and use the following event. This will hide the answer whenever a new card is rendered.

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

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

2. Changing your snippet to work with JQuery The problem is you're hiding your element the wrong way. You shouldn't hide it with js, but with css. That way it's hidden by default.

.card p.answer{
  display: none;  
}

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

Either way would make your click event code work. Personally I'd combine the options I suggested: Make a template for the cards (it's cleaner/easier to work on nicely contained templates) and adjust the css so it is hidden by default.

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

Let me know if you have any other questions

这篇关于流星：点击按钮显示一些内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！