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

How to show an icon on click in meteor?

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

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

 <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标签时显示glyphicon眼睛图标，并将它们存储到集合中。我该怎么做？我是流星的新手。有人能帮我用流星怎么做吗。提前谢谢。

<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

从默认情况下隐藏#eyeIcondiv开始。例如，将以下内容添加到/client/main.css:

#eyeIcon {
  display: none;
}

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

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