javascript - Change one of many toggle button label with same function - Polymer -
i have bunch of paper-toggle-buttons
wanting have label display current state.
i can work enough on 1 button, wanting have them point 1 function code cleaner.
i have code, both toggle @ same time??? it's js wrong.
polymer({ is: 'example-element', properties: { labeltext: { type: string, value: 'false' } }, checktoggle: function(e) { var togglebutton = e.currenttarget.getattribute('input'); this.$$('#' + togglebutton).checked ? this.labeltext = "true" : this.labeltext = "false"; }, });
<base href="https://polygit.org/polymer+polymer+v1.9.0/components/" /> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="paper-toggle-button/paper-toggle-button.html" /> <example-element></example-element> <dom-module id="example-element"> <template> <paper-toggle-button input="paper-toggle1" id="paper-toggle1" on-click="checktoggle">{{labeltext}}</paper-toggle-button> <paper-toggle-button input="paper-toggle2" id="paper-toggle2" on-click="checktoggle">{{labeltext}}</paper-toggle-button> </template> </dom-module>
no point using custom property this, may change dom directly. 1 way of doing it.
polymer({ is: 'example-element', properties: { labeltext: { type: string, value: 'false' } }, checktoggle: function(e) { e.currenttarget.queryselector(".label").innerhtml = e.currenttarget.checked == true; }, });
<base href="https://polygit.org/polymer+polymer+v1.9.0/components/" /> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="paper-toggle-button/paper-toggle-button.html" /> <example-element></example-element> <dom-module id="example-element"> <template> <paper-toggle-button input="paper-toggle1" id="paper-toggle1" on-click="checktoggle"><span class="label">false</span></paper-toggle-button> <paper-toggle-button input="paper-toggle2" id="paper-toggle2" on-click="checktoggle"><span class="label">false</span></paper-toggle-button> </template> </dom-module>
Comments
Post a Comment