如何在流星点击时显示图标？答案

【问题标题】：How to show an icon on click in meteor?如何在流星点击时显示图标？
【发布时间】：2016-08-02 16:26:53
【问题描述】：

我正在流星中构建一个应用程序，我在模板中有以下代码。

 <h3>
   <b>
     <a class="viewed" href="/jobdetails/{{_id}}">{{title}}</a>
   </b>
   &nbsp;&nbsp;
   <span class="job-type part-time">Part Time</span> 
 </h3>


<div id="eyeIcon">
  <span class="glyphicon glyphicon-eye-open" style="color:green"></span>    
 </div>

我必须在单击 href 标记时显示字形眼睛图标并将它们存储到集合中。我怎样才能做到这一点？我是流星的新手。任何人都可以帮助我如何使用 Meteor 来做到这一点。提前致谢。

【问题讨论】：

标签： javascript jquery html css meteor

【解决方案1】：

<h3>
   <b>
     <a class="viewed" href="/jobdetails/{{_id}}">{{title}}</a>
   </b>
   &nbsp;&nbsp;
   <span class="job-type part-time">Part Time</span> 
 </h3>

{{showIcon}}
<div id="eyeIcon">
  <span class="glyphicon glyphicon-eye-open" style="color:green"></span>    
 </div>
{{/if}}


Template.yourTemplate.helpers({
  'showIcon':  function() {
    return Session.get('showIcon');
  },
});
Template.yourTemplate.events({
  'click .viewed': function(event, instance) {
    event.preventDefault();
    Session.set('showIcon', true);
  },
});

请注意，我已使用会话在整个应用程序中保存您的数据。如果您还想永久保留此值，则可以使用集合。

另外，如果你只保留它的值以在页面刷新时也保持不变，那么你可以使用 Session.setPersistent (https://github.com/okgrow/meteor-persistent-session) 而不是 Session.set

【讨论】：

【解决方案2】：

首先默认隐藏您的#eyeIcon div。例如，将以下内容添加到/client/main.css：

#eyeIcon {
  display: none;
}

然后利用Blaze Template event system 在单击链接时显示 div。所以在你的模板中：

Template.yourTemplate.events({
  'click .viewed'(event, instance) {
    event.preventDefault();
    instance.$('#eyeIcon').show();
  },
});

【讨论】：

感谢您的回复。它在点击时显示眼睛图标，但它不会在点击时进入描述页面。它只是显示图标而已。我们如何解决这个问题？
您最初的问题只是询问了有关显示图标的问题。当您说显示描述页面时，您的意思是在当前页面上显示描述部分，还是实际路由到单独的页面？您是否尝试在点击时在眼睛图标下方显示说明？
当点击一个链接时，它会转到描述页面（路由到另一个页面）。所以当用户查看时，它应该在链接旁边显示一个眼睛图标。