javascript - 根据单击的元素对不同元素执行相同的功能 - polymer

Question

我有 3 个用于密码的纸质输入字段，每个字段都有一个清晰的图标，通过点击链接到其自己的独特功能 - 所有这些都执行相同的功能任务，但他们各自的输入。

有什么方法可以重写这个，这样我只有 1 个函数可以知道要清除哪个输入，具体取决于我单击的清除图标？

HTML

<paper-input id="currentPassword" label="Current Password">
    <div suffix id="icons1" class="input-icons1">
        <paper-icon-button icon="clear" id="clear" class="clear1" on-click="clearData1"></paper-icon-button>
    </div>
</paper-input>

<paper-input id="newPassword" label="New Password">
    <div suffix id="icons2" class="input-icons2">
        <paper-icon-button icon="clear" id="clear" class="clear2" on-click="clearData2"></paper-icon-button>
    </div>
</paper-input>

<paper-input id="confirmPassword" label="Confirm New Password" on-input="passMatch">
    <div suffix id="icons3" class="input-icons3">
        <paper-icon-button icon="clear" id="clear" class="clear3" on-click="clearData3"></paper-icon-button>
    </div>
</paper-input>

JS

 clearData1 : function() {
      this.$.currentPassword.value = '';
  },

  clearData2 : function() {
      this.$.newPassword.value = '';
  },

  clearData3 : function() {
      this.$.confirmPassword.value = '';
  },

Answer 1

您可以通过在 paper-icon-button 上设置一个标识输入目标的属性来实现这一点。

<paper-input id="newPassword" label="Current Password">...</paper-input>
<paper-input id="currentPassword" label="Current Password">...</paper-input>

<paper-icon-button 
  icon="clear" 
  input="newPassword" 
  on-tap="clearData">
</paper-icon-button>

<paper-icon-button 
  icon="clear" 
  input="currentPassword" 
  on-tap="clearData">
</paper-icon-button>

在你的JS中，你可以获取输入属性并设置相应的值:

clearData: function (event) {
    var idOfInput = e.currentTarget.getAttribute('input');
    this.$$('#' + idOfInput).value = '';
}

清除所有输入:

clearAll: function () {
    var allInputs = Polymer.dom(this.root).querySelectorAll('paper-icon-button'); // or certain class .btn-class
    allInputs.forEach(function (input) {
        input.value = '';
    });
}