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

Question

我有一堆paper-toggle-buttons，我希望标签显示其当前状态。

我可以在一个按钮上完成这项工作，但我希望让它们指向一个功能，以便我的代码更清晰。

我目前有这个代码，但两者都会同时切换??? 这肯定是JS错了。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

Polymer({
  is: 'example-element',
  properties: {
    labelText: {
      type: String,
      value: 'false'
    }
  },
  checkToggle: function(e) {
    e.currentTarget.querySelector(".label").innerHTML = e.currentTarget.checked == true;
  },
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试仅更改单击的切换的innerText：

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

Answer 3

使用属性的强度。

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

您也可以执行更多高级操作，例如保存对象（paperToggle.first）中的每个切换按钮，也不添加接收id的方法并将其用作所述对象中的键。