纸张工具栏javascript没有反应

我有一个聚合纸工具栏元素，它接受一些自定义属性，如背景颜色和标题。它包含一个搜索按钮，并在各种其他元素中调用。 问题是，只有第一次调用它的元素在切换时才会显示搜索框，而在其他元素中则不会

这是工具栏的代码：

<template>
    <paper-toolbar class$="{{toolbarSize}}" style$="background-color:{{toolbarColor}};">
      <span class="title"><p>{{topTitle}}</p></span>
            <div id="searchbox">
              <input-search placeholder="Search …"></input-search>
            </div>
            <paper-icon-button id="searchicon" icon="search" on-tap="openSearch"></paper-icon-button>

      <span class="middle title"><h1>{{middleTitle}}</h1></span>
      <span class="bottom title"><p class="subtitle">{{bottomTitle}}</p></span>
    </paper-toolbar>
</template>
<script>
    Polymer({
      is: 'tool-bar',
      properties: {
        topTitle: String,
        middleTitle: String,
        bottomTitle: String,
        toolbarSize: String,
        toolbarColor: String
      },
      openSearch: function() {
        var sb = document.getElementById("searchbox");
        console.log(sb);
        if (sb.hasAttribute("hidden")) {
          sb.removeAttribute("hidden");
        } else {
          sb.setAttribute("hidden", true);
        }
      }
    });
</script>

这是在各种其他元素中调用的代码：

<paper-scroll-header-panel>
 <div class="paper-header staticpage">
  <tool-bar
    toolbar-color="var(--sc-gold-500)" 
    toolbar-size="tall" 
    middle-title="Titletext" 
    bottom-title="Subtitle text">
  </tool-bar>
 </div>
 <page-view></page-view>
</paper-scroll-header-panel>

当我打开网站并点击搜索图标时，它确实可以很好地切换搜索框。但是，当我转到任何其他页面时，如果有不同的元素调用具有不同属性的同一工具栏，它将不再切换工具栏

在我看来，这就像一个bug，但如果有人对此行为有解决方案或解释，我将非常感激。我用其他各种输入元素进行了尝试，结果也是一样的

Console.log的输出： console.log似乎表明一切正常

在元素正确隐藏/取消隐藏的第一页上： 第一次点击： 第二次点击：

然后我移动到另一个页面/元素，它给出了完全相同的结果，只是该元素没有隐藏，即使属性hidden=true。但是，当我查看inspect元素时，它没有显示hidden=true属性

---

但是，当我单击它时，console.log显示hidden=true，然后我移回第一页/元素，搜索框确实隐藏在第一页上。

因为Polymer基于阴影DOM，标准DOM选择器（如document.getElementById'someId'）被错误地建议将导致意外结果。这是因为自定义元素将向DOM中插入重复的ID

要克服这个问题，您必须使用Polymer的元素选择器方法：Polymer.domthis.root.querySelector'someId'。可以方便地将其缩短为。$$.someId。其中，这是自定义元素

修复 对于上述代码，请将openSearch函数更改为以下内容：

openSearch: function() {
  this.toggleAttribute('hidden', true, this.$.searchbox);
}

谢谢你指出我最初的错误

固定解释 元素选择 this.$是当前自定义元素的元素ID对象，当它被压印到页面上时。因此，$.searchbox获取此自定义元素的“searchbox”元素的元素句柄。这与document.getElementById…（它将只获取它在页面上找到的第一个id为searchbox的元素，而不一定是属于当前自定义元素的元素）

属性切换 Polymer为其元素句柄添加了一些特殊方法，这些句柄来自自定义元素的PolymerBase。其中之一是PolymerBase.toggleAttributeString name[，布尔值，元素节点]方法。若要对聚合物元素使用此方法，请从this.$或this.$$调用该元素的引用

对于自定义图元的图元，请使用：

this.toggleAttribute'hidden'，true，this.$.someElementId 如果目标图元是由polymer加载的自定义图元，则还可以使用：

此.$.someElementId.toggleAttribute'hidden' 此.$.someElementId.toggleAttribute“隐藏”，为true 作为旁注：请将工具栏重命名为vims toolbar或类似工具，以遵循自定义元素命名方案-

---

进一步阅读：

首先，您应该在声明sb变量时添加var。其次，当您在声明变量并测试它之后添加console.logsb时，不同元素的输出是什么。最后一件事，您应该通过js函数sb.setAttributehidden添加属性，这是正确的，但这只是表面现象。这里缺少var是一个错误。我已经纠正了这一点，并将您的其他建议和console.log的输出添加到上述问题中。你知道这是什么吗？谢谢你的详细解释。唯一的问题是控制台现在告诉我：uncaughttypeerror:this.$.searchbox.toggleAttribute不是函数。但polymer是通过加载的，并且该函数存在。@Vims函数toggleAttribute在javascript中不存在。这是聚合物的功能。所以：this.toggleAttributehidden，true | false，this.$.searchbox；上面的解释是无效的，因为这。$.searchbox没有指向聚合物元素，而是简单地感谢@kuba-Šimonovský的修复。我习惯于直接在自定义元素上使用它，所以无意中使用了该代码。我已经修改了答案，以处理通用元素。