javascript - 更改具有相同功能的多个切换按钮标签之一 - polymer

Question

我有一堆纸质切换按钮，我想让标签显示其当前状态。

我可以通过一个按钮就足够简单地让它工作，但我想让它们指向一个函数，以便我的代码更干净。

我目前有这个代码，但是两者会同时切换？？？ 肯定是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

为此没有必要使用自定义属性，您也可以直接更改 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>