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.