Question

我有3个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', '');
          }
       }
   });
}

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

2 个答案:

HTML

JS