Question

我有table有很多tr，当我的页面加载第一 tr时，第二 tr隐藏，例如：

<table>
  <tr></tr> // shows
  <tr></tr> // hide
  <tr></tr> // shows
  <tr></tr> // hide
  ...
  ...
  etc.
</table>

我想要构建的内容：当您点击＆＃34;显示＆＃34; tr，lower tr（位于下方）也必须显示，当你点击＆＃34; NEW＆＃34;显示它必须隐藏（如切换）

问题：当我抓住＆＃34;显示＆＃34; tr，ALL＆＃34; hide＆＃34; tr也显示 NOT 位于

下面的那个

我的代码：

<template name="postJobs">
  <tr class="smallInfo">
    // some code
  </tr>
  {{#if showFullContent}}
  <tr class=" bigInfo">
    // some code
  </tr>
  {{/if}}
</template>


Template.postJobs.helpers({
  showFullContent:function(){
    return Session.get('showContent');
   }
});

Template.postJobs.events({
  'click .smallInfo':function(){
    Session.set('showContent',true);
  },
  'click .bigInfo':function(){
    Session.set('showContent',false);
  },
});

我不想使用jQuery

Answer 1

您当前代码的问题在于您正在使用Session，这是一个全局反应词典，这意味着您最终只会为所有表行存储一个状态。

以下是使用模板作用域ReactiveVar对象的解决方案：

HTML

<template name="jobsTable">
  <table>
    {{#each jobs}}
      {{> postJobs}}
    {{/each}}
  </table>
</template>

<template name="postJobs">
  <tr class="smallInfo">
    // some code
  </tr>
  {{#if showFullContent}}
    <tr class=" bigInfo">
      // some code
    </tr>
  {{/if}}
</template>

JS

Template.postJobs.onCreated(function(){
  this.showFullContent = new ReactiveVar(false);
});

Template.postJobs.helpers({
  showFullContent: function(){
    return Template.instance().showFullContent.get();
  }
});

Template.postJobs.events({
  "click .smallInfo": function(event, template){
    template.showFullContent.set(true);
  },
  "click .bigInfo": function(event, template){
    template.showFullContent.set(false);
  }
});

显示隐藏元素流星方式

1 个答案: