切换不适用于显示替代消息
[英]Toggle not working for displaying alternate message
问题描述
我想在按钮单击事件上切换消息“是”和“否”，但是当前不适用于以下代码：
的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<button id="myButton">
Button
</button>
<br />
<span id="mySpan">
</span>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
JS custom.js
$(document).ready(function(){
$('#myButton').on('toggle',function(){
$('#mySpan').html('Yes');
},function(){
$('#mySpan').html('No');
});
});
6 个解决方案
解决方案1
2 2016-11-20 18:34:41
没有'toggle'事件-您可以使用jquery .toggle()函数或使用.on('click')处理函数来执行切换。
$( "#target" ).toggle(function() {
alert( "First handler for .toggle() called." );
}, function() {
alert( "Second handler for .toggle() called." );
});
解决方案2
2 2016-11-20 18:44:28
var $mySpan = $('#mySpan'); $('#myButton').on('click', function(){ $mySpan.html( $mySpan.html() === 'Yes' ? 'No' : 'Yes' ); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="myButton"> Button </button> <br /> <span id="mySpan"> </span>
解决方案3
1 2016-11-20 18:34:54
它在第一次点击时不会执行任何操作，因为它只是在此时附加了事件处理程序。
$(document).ready(function(){ $('#myButton').click(function(){ $("#mySpan").text() =="Yes"? $('#mySpan').text('No'):$('#mySpan').text('Yes'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="myButton"> Button </button> <br /> <span id="mySpan"> </span>
解决方案4
1 2016-11-20 18:40:02
你只需要使用.click ，而不是事件.on 。
这是工作的小提琴：
https://jsfiddle.net/mp5w4b8c/
而且您的jQuery应该如下所示：
$(document).ready(function(){
$('#myButton').click(function(){
$('#mySpan').html('Yes');
},function(){
$('#mySpan').html('No');
});
});
更新：
我将jQuery逻辑更改为此：
$(document).ready(function() {
$('#myButton').click(function() {
if($('#mySpan').html === "" || 'No') {
$('#mySpan').html('Yes');
} else if($('#mySpan').html === 'Yes') {
$('#mySpan').html('No');
}
});
});
但它没有按我预期的那样工作。 我的代码中有任何问题吗？
更新的小提琴： https : //jsfiddle.net/mp5w4b8c/
解决方案5
1 2016-11-20 19:09:03
可以在最新版本的jQuery上切换。 .toggle()现在仅显示或隐藏一个元素。 您可以使用多种选项来控制这种情况的发生。 此示例从存在的所有元素开始，但是其中一个元素不会通过CSS显示。 jQuery .toggle()将使用mySpan类切换元素上的显示值。
$('#myButton').click(function(){ $('.mySpan').toggle(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <title> </title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/custom.css" /> </head> <body> <button id="myButton"> Button </button> <br /> <span class="mySpan">Yes</span> <span class="mySpan" style="display: none">No</span> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="js/custom.js" ></script> </body> </html>
解决方案6
0 2016-11-20 18:56:37
var $elem = $('#mySpan');
$('#myButton').click(function(){
$elem.html( $elem.text().trim() === 'Yes' ? 'No' : 'Yes' );
});
此代码应适合您的情况
切换时未显示消息
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.