試圖使用聚合物紙切換按鈕

對不起，如果這是一個愚蠢的問題，但我想弄清楚如何使用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

試圖使用聚合物紙切換按鈕

回答

相關問題