尝试使用聚合物纸张切换按钮

Trying to work with Polymer paper-toggle-button

本文关键字：张切换 按钮 聚合物      更新时间：2023-09-26

抱歉，如果这是一个愚蠢的问题，但我正在尝试弄清楚如何使用paper-toggle-button使元素在我的页面上出现/消失。

我可以通过简单地使用onclick来使其工作，但这显然是不对/理想的，我在网上找不到任何使用它的例子（用于网络）。

切换按钮部署（不带onclick='toggleShow'()）为：

<paper-toggle-button onchange={{toggleShow}} checked></paper-toggle-button>

我尝试过（但失败）的脚本是：

function toggleShow() {
  if (checked: false) {
    chart.hide('upload'); //this works with onclick
  } else {
    chart.show('upload');
  }
}

我敢肯定这是一个有点愚蠢的问题，但任何帮助让我朝着正确的方向前进将不胜感激

var toggle = document.querySelector("paper-toggle-button");
toggle.addEventListener('change', function () {
  if (this.checked) {
    // do something if when checked
  } else {
    // do something if not checked
  }
});

上面的代码将检查切换获得用户交互时触发的"Change"事件，并将检查按钮的状态。

如果你打算在自定义元素中使用它，你可以把它包装在 ready 函数中。 你会给切换一个ID（在本例中我使用了切换），这样你就可以用聚合物快速选择来选择它。

ready: function () {
  this.$.toggle.addEventListener('change', function () {
    if (this.checked) {
      // do something if when checked
    } else {
      // do something if not checked
    }
  }); 
}

编辑：第一次发布时没有注意到 OP 使用了 onchange 属性，因此您可以忽略有关事件侦听器的部分，而只使用命名函数作为 OP 发布。 只需要纠正逻辑。

第二次编辑：这是一个 plunker，其中包含方法更改属性和事件侦听器的示例。 http://plnkr.co/edit/3tn3C2GpgKQY9bkzCt0L?p=preview

OP 在更改时使用 onchange，这可能是问题的根源。

我认为属性绑定是一种更惯用的处理方式，如下所示：

<paper-toggle-button checked="{{showChart}}"></paper-toggle-button>
<div id="chart" hidden$="[[!showChart]]">...</div>

这个应该可以工作：

<paper-toggle-button on-change="toggleShow" checked></paper-toggle-button>
相关文章：