如何让单击的项目显示/隐藏其隐藏元素？

Question

我在显示点击项隐藏元素时遇到了一些问题。

在我的点击事件代码下方查找。

'click .stylishTiles'(event, instance) {
   event.preventDefault();
   var selectedTile = this._id;

   Session.set("selectedTile_id2", selectedTile);

   $("#hidden").show(300);
   $(".selected").addClass('show');
  },

'click .show'(event, instance) {
   event.preventDefault();

   $("#hidden").hide(300);
   $(".stylishTiles").removeClass('show');

} 

clicked 事件中的Session.set("selectedTile_id2", selectedTile) 通过Session.get('selectedTile_id2') 传递给helper。

在目标helper代码下方找到：

'selectedTile': function () {

    var selectedTileId = this._id;
    var selectedTile_id2 = Session.get('selectedTile_id2');

    if(selectedTileId == selectedTile_id2){
        return "selected"
    }
} 

并在下面找到目标模板的代码：

<template name="invoicesV2C">

{{#each pendingInvoicesV2C}}

    <div class="well well-sm stylishTiles {{selectedTile}}">

        <div id ="invoiceAmount"> KES: {{formatCurrency recipientAmount}} </div>

        <div id="hidden"> tel: {{recipientNumber}} <br> purpose: {{invoicePurpose}} </div>  

    </div>                      

{{/each}}

</template>

模板中的{{#each pendingInvoicesV2C}} 正确生成了几个项目，同时由于CSS 代码

，默认情况下正确隐藏了它们的隐藏元素

#hidden{
display: none;
}

非常想要的效果是当我点击任何项目时，它的隐藏元素是：<div id="hidden"> tel: {{recipientNumber}} <br> purpose: {{invoicePurpose}} </div> 应该显示，因此

 $("#hidden").show(300);
 $(".selected").addClass('show');

反过来说，每当我点击一个已经显示其元素的项目时，同样是：<div id="hidden"> tel: {{recipientNumber}} <br> purpose: {{invoicePurpose}} </div>，它应该被隐藏。

目前，无论我点击哪个项目，只有项目列表中的第一个元素会显示/隐藏其元素。

请帮助我了解如何让点击的元素显示其隐藏的详细信息？

Answer 1

你有很多错误以及非常扭曲的逻辑。

让我帮你简化一下：

CSS： 我们使用 class 而不是 id

.hidden {
  display: none;
}

模板：

<template name="invoicesV2C">
  {{#each pendingInvoicesV2C}}
    <div class="well well-sm stylishTiles">
      <div class="invoiceAmount">
        KES: {{formatCurrency recipientAmount}}
      </div>
      <div class="toggled hidden">
        tel: {{recipientNumber}}
        <br>
        purpose: {{invoicePurpose}}
      </div>  
    </div>                      
  {{/each}}
</template>

模板代码：

Template.invoicesV2C.events({
  'click .stylishTiles'(event) {
    event.preventDefault();
    const $e = $(event.target).closest('.stylishTiles');
    $e.find('.toggled').toggle(300);
  }
});

就是这样。您甚至根本不需要帮助程序和使用Session。

这是一个小小的小提琴，代表它是如何工作的：https://jsfiddle.net/iStyx/ff6hvorz/