根据单击的内容，对不同的元素执行相同的功能-聚合物

Question

我有3 paper-input用于密码的paper-input字段，每个字段都有一个清晰的图标，通过on-click即可链接到其自己的独特功能-所有这些都执行相同的任务，但又分别对应各自的输入。

有什么方法可以重写它，使我只有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中，您可以获取input属性并设置相应的值：

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 = '';
    });
}

Answer 2

嗨，您可以通过检查处理程序中注入的事件来找出单击了哪个元素

的HTML

<paper-input id="currentPassword" label="Current Password">
    <div suffix id="icons1" class="input-icons1">
        <paper-icon-button icon="clear" id="clear1" class="clear1" on-tap="clearData"></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="clear2" class="clear2" on-tap="clearData"></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="clear3" class="clear3" on-tap="clearData"></paper-icon-button>
    </div>
</paper-input>

js

clearData: function(event) {
   var that = this;//needed for closure
   event.path.forEach(function(item){
       if(item.nodeName.toLowerCase() === "paper-icon-button") {
          if(item.id === "clear1") {
              that.$.currentPassword.setAttribute('value', '');
          } else if(item.id === "clear2") {
              that.$.newPassword.setAttribute('value', '');
          } else if(item.id === "clear3") {
              that.$.confirmPassword.setAttribute('value', '');
          }
       }
   });
}