在自定义聚合物元素中使用 jquery toggle(）

Using jquery toggle() inside a custom polymer element

本文关键字：jquery toggle 自定义 聚合物 元素      更新时间：2023-09-26

我想使用一个按钮在单击时切换单词，如下所示：

function toggle() {
    $("#secret").toggle();
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <button onClick="toggle()"> toggle </button>
    <p id="secret" style="display: none"> secret </p>
</body>

这没有问题，但是当在自定义 Polymer 元素中使用代码时，单词只会显示，而不会再次隐藏。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//www.polymer-project.org/components/polymer/polymer.js"></script>
<polymer-element name="test-element">
    <template>
        <button on-tap="{{toggle}}"> toggle </button>
        <p id="secret" style="display: none"> secret </p>
    </template>
    <script>
        Polymer({
            toggle: function() {
                $(this.$.secret).toggle();
            }
        });
    </script>
</polymer-element>
<test-element></test-element>

但是，使用show()和hide()有效：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//www.polymer-project.org/components/polymer/polymer.js"></script>
<polymer-element name="test-element">
    <template>
        <button on-tap="{{toggle}}"> Toggle </button>
        <p id="secret"> secret </p>
    </template>
    <script>
        Polymer({
            toggle: function() {
                if ($(this.$.secret).css("display") == "block") {
                    $(this.$.secret).hide();
                } else {
                    $(this.$.secret).show();
                }
            }
        });
    </script>
</polymer-element>
<test-element></test-element>

为什么toggle()功能本身工作，但当show()和hide()工作时，在自定义聚合物元件内不起作用？

我认为你不必使用jQuery进行"切换"，你可以用更聚合的方式做到这一点：

<script src="//www.polymer-project.org/components/polymer/polymer.js"></script>
<polymer-element name="test-element">
  <template>
    <button on-tap="{{toggle}}">Toggle</button>
    <p id="secret" hidden?="{{!showingSecret}}">secret</p>
  </template>
  <script>
    Polymer({
      toggle: function() {
        this.showingSecret = !this.showingSecret;
      }
    });
  </script>
</polymer-element>
<test-element></test-element>

我不认为jquery在聚合物元素中工作。 如果是这样，也许不能完全工作。 但它很容易修复。 你可以使用 https://www.polymer-project.org/docs/elements/core-elements.html#core-collapse

相关文章：