fadeOut里面的onclick函数
[英]fadeOut inside the onclick function
问题描述
我写了一个代码，显示点击问题，并在一段时间内显示答案。 当代码中没有fadeOut函数时，代码工作正常。 一旦我放了fadeOut函数，问题和答案只显示一次。 之后只显示问题。 为什么会这样？
这是我的代码链接： http ： //jsfiddle.net/sagesony/6qDap/1058/
和代码
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<body>
<p>Question: <span id="question"></span></p>
<p>Answer: <span id="answer"></span></p>
<input id="start" type="button" value="start"/>
<input id="show" type="button" value="show answer"/>
<script>
document.getElementById("start").onclick=function(){
var i=Math.round(Math.random()*3);
var verbs=["play","run","go","kill"];
document.getElementById("question").innerHTML=verbs[i];
document.getElementById("show").onclick=function(){
var answers=["golf","dog","school","none"];
document.getElementById("answer").innerHTML=answers[i];
$("#answer").fadeOut(1000);
};
};
</script>
4 个解决方案
解决方案1
2 2014-02-06 12:03:07
因为fadeOut将你的元素设置为display：none; 褪色后。 所以，你必须再次将此元素设置为fadeOut。
只需使用：
.show()
去做这个。
解决方案2
0 2014-02-06 12:02:58
你需要使用延迟
var verbs = ["play", "run", "go", "kill"];
var answers = ["golf", "dog", "school", "none"];
//register click handler
$('#start').click(function () {
var i = Math.round(Math.random() * 3);
$("#question").html(verbs[i]);
$('#show').click(function () {
$("#answer").html(answers[i]).delay(1000).fadeOut();
})
})
解决方案3
0 2014-02-06 12:03:54
你应该再次展示它： http ： //jsfiddle.net/6qDap/1063/
$("#answer").fadeOut(1000, function(){
$(this).show().text('');
});
解决方案4
0 2014-02-06 12:04:06
这是因为在调用fadeOut()方法之后， answer范围将永远隐藏。 您将需要做一些事情再次显示它，如下所示：
var i = 0;
var verbs = ["play", "run", "go", "kill"];
var answers = ["golf", "dog", "school", "none"];
$('#start').click(function () {
i = Math.round(Math.random() * 3);
$('#question').html(verbs[i]);
});
$('#show').click(function () {
$("#answer").html(answers[i]).show().fadeOut(1000);
});
如何防止在click和fadeOut函数中更改变量的值？
[英]How to prevent changing variable's value inside click and fadeOut function?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.