javascript - meteor 按钮上的切换图标

Question

我在 meteor 中创建了一个可扩展的表。按下以展开表格的初始按钮上有一个加号图标。表格展开后，我无法将按钮上的图标更改为减号。基本上，我希望图标根据表格是展开还是折叠在加号和减号之间切换。

我的按钮模板:

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

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

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

Answer 1

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

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

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