我想使用一个按钮在单击时切换单词,如下所示:
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