Question

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

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()功能在自身工作但不在自定义聚合物元素内工作？

Answer 1

我认为你不必使用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>

Answer 2

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

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

2 个答案: