gpt4 book ai didi

javascript - 在自定义 polymer 元素中使用 jquery toggle()

转载 作者:行者123 更新时间:2023-11-30 17:07:44 38 4
gpt4 key购买 nike

我想像这样使用按钮来切换单词:

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>

show()hide() 是时,为什么 toggle() 函数本身可以工作,但不能在自定义 polymer 元素内部工作工作?

最佳答案

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

关于javascript - 在自定义 polymer 元素中使用 jquery toggle(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27628668/

38 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com