Jquery按钮值切换
Jquery按钮值切换
提问于 2017-07-11 14:21:45
我对jquery很陌生。当一个按钮被点击时，我正试图切换输入字段。我还更改了按钮上的值。现在，当我单击“输入”字段时，隐藏按钮并更改其值。当单击两次按钮时，我希望恢复该值。
这说得通吗？
以下是代码：
$(document).ready(function() {
$('#submit').click(function() {
$('#hello').toggle();
$('#submit').val("I don't love you");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="hello" type="text">
<input type="text">
<input type="text">
<input id="submit" type="button" value="love you"></button>
回答 6
Stack Overflow用户
回答已采纳
发布于 2017-07-11 14:28:49
您可以使用要显示的2个值设置数据属性，并根据其中一个值检查当前值，并根据其是否匹配进行切换。
<input id="hello" type="text">
<input type="text">
<input type="text">
<input id="submit" type="button" data-default="love you" data-alt="i dont love you" value="love you"></button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var $submit = $("#submit"),
def = $submit.data('default'),
alt = $submit.data('alt');
$submit.on("click", function() {
$("#hello").toggle();
($submit.val() == def) ? $submit.val(alt) : $submit.val(def);
});
});
</script>
Stack Overflow用户
发布于 2017-07-11 14:28:51
您可以使用:visible来确定该项当前是否显示。在使用切换时，可以立即使用以下方法：
$("#hello").is(":visible") ? "text on visible" : "text on hidden"更新片段：
$(document).ready(function() {
$('#submit').click(function() {
$('#hello').toggle();
$('#submit').val($('#hello').is(":visible") ? "I love you again" : "I don't love you");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="hello" type="text">
<input type="text">
<input type="text">
<input id="submit" type="button" value="love you"></button>
Stack Overflow用户
发布于 2017-07-11 14:29:19
快速检查按钮中文本的值就可以做到这一点。
$(document).ready(function(){
$('#submit').click(function(){
$('#hello').toggle();
var submitButton = $('#submit');
if(submitButton.val() === 'I dont love you'){
submitButton.val('love you');
} else {
submitButton.val('I dont love you');
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="hello" type="text" >
<input type="text">
<input type="text">
<input id="submit" type="button" value="love you"></button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45037228
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号