Javascript 点击后点击按钮的聚合物更换功能

我有一个扩展的搜索栏，当我点击时，它会根据我为点击功能编写的JS进行扩展。我还想改变这个点击功能，这样我可以在键入内容时用搜索栏进行搜索

这真的可能吗

例如。。。 单击搜索图标>搜索栏展开>键入问题，然后单击搜索图标>搜索

HTML

<paper-input id="searchMe" placeholder="Some text as a placeholder" on-input="inputText">
   <div suffix>
      <paper-icon-button class="clear" id="clearIcon" icon="clear" on-click="clearInput" style="display: none;"></paper-icon-button>
      <paper-icon-button class="search" id="searchIcon" icon="search" on-click="searchClick"></paper-icon-button>
    </div>
</paper-input>

<paper-input id="searchMe" placeholder="Some text as a placeholder" on-input="inputText">
  <div suffix>
    <paper-icon-button class="clear" id="clearIcon" icon="clear" on-click="clearInput" style="display: none;"></paper-icon-button>
    <template is="dom-if" if="[[expandedBar]]">
      <paper-icon-button class="search" id="searchIcon" icon="search" on-click="searchClick"></paper-icon-button>
    </template>
    <template is="dom-if" if="[[!expandedBar]]">
      <paper-icon-button class="search" id="searchIcon" icon="search" on-click="expandBar"></paper-icon-button>
    </template>
  </div>
</paper-input>

更新日期：2017年3月7日 我以为我已经整理好了，但是我有一个bug

当输入文本时，我更改了搜索按钮以启动一个新功能（这将用于将来实际搜索PUT或其他内容），但是我无法让它在以后恢复到原始功能。。。例如，请参见我的GIF

---

我在GitHub板上发布了这个问题后不久就找到了解决方案。

请参阅下面的代码，找到适合我的代码

searchClick : function() {
    /* expands the search bar */
    this.listen(this.$.searchIcon, 'click', 'doSomethingElse'); /* THIS IS THE CORRECT LINE */
}

doSomethingElse : function() {
    /* Does something else */
}

---

另一个解决方案可能是隐藏不需要的按钮：

HTML

<paper-input id="searchMe" placeholder="Some text as a placeholder" on-input="inputText">
   <div suffix>
      <paper-icon-button class="clear" id="clearIcon" icon="clear" on-click="clearInput" style="display: none;"></paper-icon-button>
      <paper-icon-button class="search" id="searchIcon" icon="search" on-click="searchClick"></paper-icon-button>
    </div>
</paper-input>

<paper-input id="searchMe" placeholder="Some text as a placeholder" on-input="inputText">
  <div suffix>
    <paper-icon-button class="clear" id="clearIcon" icon="clear" on-click="clearInput" style="display: none;"></paper-icon-button>
    <template is="dom-if" if="[[expandedBar]]">
      <paper-icon-button class="search" id="searchIcon" icon="search" on-click="searchClick"></paper-icon-button>
    </template>
    <template is="dom-if" if="[[!expandedBar]]">
      <paper-icon-button class="search" id="searchIcon" icon="search" on-click="expandBar"></paper-icon-button>
    </template>
  </div>
</paper-input>

---

是的，单击时的

是一个属性，您可以像更改其他属性一样更改它。只需确保在更改前启动第一个函数

至于你想要实现的目标，我想不出更好的方法或任何理由，这都是个坏主意

你的代码不起作用了吗？如果不是，我认为这只是因为在
setAttribute
上有一个输入错误，为什么不简单地在单击时切换搜索栏的展开状态属性，然后根据当前状态进行搜索或展开呢

searchClick : function() {
    if(this.expanded){
     //do search
    }
    this.expanded = !this.expanded;
}

我只见过Dom If一次，自己还没有使用过，但我同意这可能是一种方法。你能给我一个例子，说明在设置属性之前如何触发事件吗？我对JS更深层次的功能非常陌生。是的，我发现了我的拼写错误。现在我想起来了，实际上没有办法做到这一点。。。该函数在单击时激发，该函数用于更改该函数。我只是想我应该很快指出这一点，以防你不小心做了这件事，浪费时间想弄清楚到底发生了什么。整个周末我都被它困扰着。我想我只需要更改功能，使不同的按钮出现/消失。我想那会更简单。
searchClick : function() {
    if(this.expanded){
     //do search
    }
    this.expanded = !this.expanded;
}