在自定义聚合物元素中使用jquery toggle（）
[英]Using jquery toggle() inside a custom polymer element
问题描述
I want to use a button to toggle a word on click like this: 
我想使用一个按钮在点击时切换一个单词，如下所示：
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>
This works without problems but when using the code inside a custom Polymer element, the word is only shown but not hidden again. 这可以正常工作，但是在自定义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>
However, using show() and hide() works: 但是，使用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>
Why is the toggle() function working itself but not working inside a custom polymer element when show() and hide() are working ? 当show()和hide()工作时，为什么toggle()函数本身可以工作，但不能在自定义聚合物元素中工作？
2 个解决方案
解决方案1
2 2014-12-24 03:14:18
I don't think you have to use jQuery for "toggling" you can do that in more polymeric way: 我认为您不必使用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>
解决方案2
0 已采纳 2014-12-23 22:07:33
i don't think jquery works inside polymer elements. 我不认为jQuery在聚合物元素内起作用。 and if so maybe not fully working. 如果是这样，可能无法完全正常工作。 but it's easy to fix. 但是很容易解决。 you could use https://www.polymer-project.org/docs/elements/core-elements.html#core-collapse 您可以使用https://www.polymer-project.org/docs/elements/core-elements.html#core-collapse
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.