尝试使用 Polymer paper-toggle-button答案

【问题标题】：Trying to work with Polymer paper-toggle-button尝试使用 Polymer paper-toggle-button
【发布时间】：2015-02-24 09:49:57
【问题描述】：

对不起，如果这是一个愚蠢的问题，但我正在尝试弄清楚如何使用 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');
  }
}

我确信这是一个有点愚蠢的问题，但如果能帮助我朝着正确的方向前进，我们将不胜感激

【问题讨论】：

if (checked: false){ 是一个语法错误（除非聚合物正在做语法转换）

标签： javascript polymer material-design

【解决方案1】：

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

上面的代码将检查切换获取用户交互时触发的“更改”事件，并将检查按钮的状态。

如果你打算在自定义元素中使用它，你可以将它包装在 ready 函数中。您可以给切换一个 id（在这种情况下我使用切换），以便您可以使用聚合物快速选择来选择它。

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

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

第二次编辑：这里是一个 plunker，其中包含 on-change 属性和 eventlistener 方法的示例。 http://plnkr.co/edit/3tn3C2GpgKQY9bkzCt0L?p=preview

op 在 on-change 上使用了 onchange，这可能是问题的根源。

【讨论】：

这在toggle.addEventListener（大写L）上很棒（小错字），但除此之外完全符合我的要求。另一个问题 - querySelector 只是抓取第一个元素。我可以使用 querySelectorAll 来获取页面上的所有纸张切换按钮吗？
很抱歉 L 更糟糕的是犯了错误，看起来我做了 2 次。该死的我是人类。是的，您可以使用 querySelectorAll 收集元素组。然后像正常一样解析对象。我确实在使用 element.attribute = value 设置属性时遇到了问题，我不得不使用 element.setAttribute(attribute, value);
不用担心 - 答案很好，只是想确保其他人知道，以防他们偶然发现它

【解决方案2】：

这个应该可以的：

<paper-toggle-button on-change="toggleShow" checked></paper-toggle-button>

【讨论】：

【解决方案3】：

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

<paper-toggle-button checked="{{showChart}}"></paper-toggle-button>

<div id="chart" hidden$="[[!showChart]]">...</div>

【讨论】：