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.
<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:
<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 ?
Aucun commentaire:
Enregistrer un commentaire