为什么按钮单击在我的Javascript-html中不起作用？
[英]Why button click don't work in my Javascript-html?
问题描述
What I am trying to do is I have two buttons at top which by default show French and when I click on English button it must replace English by French (I am using hide and show to do so). 
我想做的是在顶部有两个按钮，默认情况下显示法语，当我单击英语按钮时，它必须用法语替换英语（我正在使用隐藏和显示操作）。
But the problem is none of them works neither the button click envokes. 但是问题是它们都不起作用，按钮单击也不会起作用。 Below is my code: 下面是我的代码：
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8" />
<title>JS Bin</title>
<script>
(function ()
{
$(".frc-tab").show();
$(".eng-tab").hide();
alert('check')
$('.eng').on('click', function (event)
{
alert('eng click');
$('.eng-tab').show();
$('.frc-tab').hide();
});
$('.frc').on('click', function (event)
{
alert('french click');
$('.eng-tab').hide();
$('.frc-tab').show();
});
})();
</script>
</head>
<body>
<div>
<button class="eng">english</button>
<button class="frc">french</button>
</div>
<div class="eng-tab">
<table class="table table-bordered">
<tr>
<td>english</td>
</tr>
</table>
</div>
<div class="frc-tab">
<table class="table table-bordered">
<tr>
<td>french</td>
</tr>
</table>
</div>
</body>
</html>
Could some one please let me know the reason for this? 有人可以让我知道原因吗？ What is something like this: 这是什么东西：
(which on French button click must replace the "English" text written with "French") and what I have is something like this: （在法语按钮上单击必须替换为用“法语”书写的“英语”文本），我所拥有的是这样的：
I don't know why? 不知道为什么
3 个解决方案
解决方案1
2 2015-04-29 04:52:30
reposition your script below the body tag or after the closing of the last div as shown.
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8" />
<title>JS Bin</title>
</head>
<body>
<div>
<button class="eng">english</button>
<button class="frc">french</button>
</div>
<div class="eng-tab">
<table class="table table-bordered">
<tr>
<td>english</td>
</tr>
</table>
</div>
<div class="frc-tab">
<table class="table table-bordered">
<tr>
<td>french</td>
</tr>
</table>
</div>
<script>
(function ()
{
$(".frc-tab").show();
$(".eng-tab").hide();
alert('check')
$('.eng').on('click', function (event)
{
alert('eng click');
$('.eng-tab').show();
$('.frc-tab').hide();
});
$('.frc').on('click', function (event)
{
alert('french click');
$('.eng-tab').hide();
$('.frc-tab').show();
});
})();
</script>
解决方案2
1 已采纳 2015-04-29 04:47:49
Your script either needs to be deferred ... 您的脚本要么需要推迟...
<script defer="defer">
... or your script needs to be below the dom elements it is manipulating ... ...或者您的脚本需要位于要操作的dom元素之下...
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery.min.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <meta charset="utf-8" /> <title>JS Bin</title> </head> <body> <div> <button class="eng">english</button> <button class="frc">french</button> </div> <div class="eng-tab"> <table class="table table-bordered"> <tr> <td>english</td> </tr> </table> </div> <div class="frc-tab"> <table class="table table-bordered"> <tr> <td>french</td> </tr> </table> </div> <script> (function () { $(".frc-tab").show(); $(".eng-tab").hide(); alert('check') $('.eng').on('click', function (event) { alert('eng click'); $('.eng-tab').show(); $('.frc-tab').hide(); }); $('.frc').on('click', function (event) { alert('french click'); $('.eng-tab').hide(); $('.frc-tab').show(); }); })(); </script> </body> </html>
解决方案3
1 2015-04-29 04:58:41
just replace the below lines of your code: 只需替换下面的代码行：
(function () { $(".frc-tab").show(); $(".eng-tab").hide(); alert('check') $('.eng').on('click', function (event) { alert('eng click'); $('.eng-tab').show(); $('.frc-tab').hide(); }); $('.frc').on('click', function (event) { alert('french click'); $('.eng-tab').hide(); $('.frc-tab').show(); }); })();
By the following line and it will work: 通过以下行，它将起作用：
$(document).ready(function() { { $(".frc-tab").show(); $(".eng-tab").hide(); alert('check') $('.eng').on('click', function (event) { alert('eng click'); $('.eng-tab').show(); $('.frc-tab').hide(); }); $('.frc').on('click', function (event) { alert('french click'); $('.eng-tab').hide(); $('.frc-tab').show(); }); } });
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.