在流星中的按钮上切换图标答案

【问题标题】：Toggling icon on button in meteor在流星中的按钮上切换图标
【发布时间】：2017-06-30 22:57:06
【问题描述】：

我在流星中创建了一个可扩展的表。用于展开表格的初始按钮上有一个加号图标。表格展开后，我将无法将按钮上的图标更改为减号。基本上，我希望图标在加号和减号之间切换，具体取决于表格是展开还是折叠。

我的按钮模板：

<template name="expandButton">
  <button class="btn btn-default btn-xs btn-circle">
    <span id="expand" class="glyphicon glyphicon-plus"></span>
  </button>
</template>

模板在 html 中被调用并按预期工作。

我最近的尝试一直在尝试使用一个事件来让图标从加号切换到减号：

Template.expandButton.events({
  'click #expand'(event) {
    event.toggleClass('glyphicon-plus glyphicon-minus');
  }
})

我也尝试了其他几种方法，但没有任何效果。我想知道这是否接近成为这样做的一种方式，或者这是否完全错误。如果这是错误的方法，我应该怎么做呢？

感谢您的帮助。不胜感激。

【问题讨论】：

试试$(event.target).toggleClass。 event 对象是一个，嗯，事件，而不是 DOM 节点。
好的，所以修复了它，但它只会在图标被按下时切换图标。因此，如果我在图标外部按下按钮，它仍然不会切换。知道如何解决这个问题吗？
如果你使用的是 React，那么状态管理会非常简单

标签： javascript html button meteor icons

【解决方案1】：

在 Meteor 中，您必须将事件绑定在正确的位置。您想将点击事件绑定到按钮。

<template name="expandButton">
    <button class="btn btn-default btn-xs btn-circle" id="expandBtn">
        <span id="expand" class="glyphicon glyphicon-plus"></span>
    </button>
</template>

这是你的活动

Template.expandButton.events({
    'click #expandBtn'(event, temp) {
        temp.$('#expand').toggleClass('glyphicon-plus glyphicon-minus');
    }
})

还请注意，在流星事件中，第一个参数是event，第二个参数是template，因此使用temp.$ 比解析完整的dom 更有效，即$(#id)

【讨论】：