我怎样才能让点击的项目 show/hide 它的隐藏元素？

Question

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

在下面找到我的点击事件代码。

'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。

在下面找到目标 帮助程序 代码：

'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 代码[=21= 而默认正确隐藏了它们的隐藏元素]

#hidden{
display: none;
}

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

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

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

目前，无论我点击哪个项目，只有项目列表中的第一个元素 show/hide 它的元素。

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

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。

这是一个很小的 fiddle，表示它是如何工作的：https://jsfiddle.net/iStyx/ff6hvorz/

我怎样才能让点击的项目 show/hide 它的隐藏元素？

How do I can get a clicked item to show/hide its hidden elements?

javascript

session

click

show-hide

meteor