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');

}

点击事件中的Session.set("selectedTile_id2", selectedTile)会通过Session.get('selectedTile_id2')传递给帮助。

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

'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 ： 我们使用类而不是 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/

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

1 个答案: