未单击的按钮显示“查看”，单击按钮显示“关闭”
未单击的按钮显示“查看”，单击按钮显示“关闭”
提问于 2016-07-29 20:11:28
我有一个常见问题列表，它是这样显示的:问题和按钮“查看答案”。
当点击“查看答案”时，它会立即变成“关闭”。
我的问题是，当“关闭”被点击时，我不能反转它。它应该再次成为“查看答案”按钮。
这是html
<p class="faq-question">Question</p>
<div class="collapse js-faq-answer" id="collapseExample">
<div class="well">
Answer
</div>
</div>
<a class="btn btn-primary js-faq-button" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">See the answer</a>这是我的脚本
$(document).ready(function() {
$('.js-faq-button').click(function(){
if(this.click){
$(this).addClass('js-faq-button-clicked');
$(this).removeClass('js-faq-button');
$('.js-faq-button-clicked').html('Close');
}
else{
$(this).addClass('js-faq-button');
$(this).removeClass('js-faq-button-clicked');
$('.js-faq-button-clicked').html('See the answer');
}
});
});回答 4
Stack Overflow用户
回答已采纳
发布于 2016-07-29 20:15:09
你的情况不正确。我会检查按钮是否有js-faq-button-clicked类。如果没有添加，如果有，则将其删除。
这不是唯一的方法，但它肯定会起作用。
$(document).ready(function() {
$('.js-faq-button').click(function(){
if(!$(this).hasClass("js-faq-button-clicked")){
$(this).addClass('js-faq-button-clicked');
$(this).removeClass('js-faq-button');
$('.js-faq-button-clicked').html('Close');
}
else{
$(this).addClass('js-faq-button');
$(this).removeClass('js-faq-button-clicked');
$('.js-faq-button-clicked').html('See the answer');
}
});
});Stack Overflow用户
发布于 2016-07-29 20:25:27
我只是将js-faq-button-clicked添加为一个类，并切换它。
$(document).ready(function(){
$('.js-faq-button').on('click',function(){
var self = $(this);
self.toggleClass('js-faq-button-clicked');
if(self.hasClass('js-faq-button-clicked')) {
self.html('Close');
}
else {
self.html('See the answer');
}
});
});Stack Overflow用户
发布于 2016-07-29 20:17:34
尝试检查if条件中的按钮的值(即文本)，而不仅仅是"Click“事件。现在你只是说“点击，切换到关闭”。您需要让它知道在两个提示之间来回切换。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38658525
复制相关文章
相似问题
腾讯云开发者
