试图使用聚合物纸切换按钮

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

我敢肯定，这是一个有点愚蠢的问题，但任何帮助让我走在正确的方向将非常赞赏

来源

2014-12-27 Mike

'如果（检查：假）{'是语法错误（除非聚合物正在进行语法转换） – FakeRainBrigand 2014-12-27 14:27:32

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

编辑：没有对op使用onchange属性，因此您可以忽略有关事件侦听器的一部分，只是使用命名功能OP发布的第一份工作通知。只需要纠正逻辑。

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

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

来源

2014-12-27 18:20:02

这是在toggle.addEventListener（大写字母L）上的很棒的（小的错字），但是除此之外我完全不知道我在找什么。另一个问题 - querySelector只是抓住第一个元素。我能否使用querySelectorAll获取页面上的所有纸张切换按钮？ – Mike 2014-12-27 23:59:38

对于L的糟糕表现，我认为我犯了2次错误。该死的我是人类。是的，你可以用querySelectorAll收集一组元素。然后像正常一样解析对象。我确实有问题设置属性与元素。属性=值我不得不使用element.setAttribute（属性，值）; – 2014-12-28 00:28:29

不用担心 - 答案很好，只是想确保其他人知道，以防他们偶然发现 – Mike 2014-12-29 02:26:10

这一个应该工作：

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

来源

2016-02-24 09:37:27 Ikbel

我想结合的性质是接近它更地道的方式，这样的事情：

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

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

来源

2016-08-01 15:27:11 Paul

试图使用聚合物纸切换按钮

回答

相关问题