更改具有相同功能的许多切换按钮标签之一 - 聚合物

Question

我有一堆 paper-toggle-buttons 想让标签显示其当前状态。

我可以通过一个按钮使它足够简单地工作，但我想让它们指向一个函数，这样我的代码就更清晰了。

我目前有此代码，但两者会同时切换？？？肯定是JS错了

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>

Answer 1

尝试只更改被点击的开关的 innerText：

checkToggle : function(e) {
    var toggleButton = this.$$('#' + e.currentTarget.getAttribute('input'));
    toggleButton.checked ? toggleButton.innerText = "True" : toggleButton.innerText = "False";
}

Answer 2

使用属性强度。

 <paper-toggle-button checked="{{paperToggle1}}">[[paperToggle1]]</paper-toggle-button>
 <paper-toggle-button checked="{{paperToggle2}}">[[paperToggle2]]</paper-toggle-button>

您还可以做更高级的事情，比如将每个切换按钮保存在一个对象中 (paperToggle.first)，或者添加一个接受 id 并将其用作所述对象中的键的方法。

Answer 3

没有必要为此使用自定义属性，您也可以直接更改 dom。这只是其中一种方法。

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>

更改具有相同功能的许多切换按钮标签之一 - 聚合物

Change one of many toggle button label with same function - Polymer

html

javascript

polymer