Jquery、次のフェードに
https://stackoverflow.com/questions/3463433
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
こんにちは男としての問題をできない課題である。いうことjquery、今まで助けてくれます。
基本的に私はクイズのスクリプトとの質問にdivsさんの人がチェックradiobox、プレスを"次の問題"ボタンを押すと、現在の事業部がフェードアウトは、次の事業部がフェードです。こちらはどのようにhtmlコードを次のように記述されています。
<div id="questions">
<div id="question0" class="question">
<span style="verhnij">Title</span>
<li><input type="radio" name="q_0" value="0"> 0</li>
<li><input type="radio" name="q_0" value="2">2</li>
<li><input type="radio" name="q_0" value="1">1</li>
<a href="" onclick="javascript: transition(0);">Next</a>
</div>
<div id="question1" class="question">
<span style="verhnij">Title</span>
<li><input type="radio" name="q_1" value="2">2</li>
<li><input type="radio" name="q_1" value="0">0</li>
<li><input type="radio" name="q_1" value="1">1</li>
<a href="" onclick="javascript: transition(1);">Next</a>
</div>
<div id="question2" class="question">
<span style="verhnij">Title</span>
<li><input type="radio" name="q_2" value="1">1</li>
<li><input type="radio" name="q_2" value="2">2</li>
<li><input type="radio" name="q_2" value="0">0</li>
<a href="" onclick="javascript: transition(2);">Next</a>
</div>
各質問事業部は独自のidと同じクラスです。
ここでは一部javascriptです。
$('#questions').ready(function(){
for (i = 1; i < 100; i++) {
if ($('#question' + i).length > 0) {
$('#question' + i).hide();
} else {
break;
}
}
});
function transition(question_id) {
$('#question' + question_id).fadeOut('fast',function() {
question_id++;
if ($('#question' + question_id).length > 0) {
$('#question' + question_id).fadeIn('fast');
} else {
Here will be Form submit
}
});
}
このスクリプトはその後押しがfadesOutとFadesIn、その機能を上書きすべきで再度質問0きます。助かります。
お願い致します。
解決
リンクをクリックすると、ページがリロードされないようにする必要があります。そうしないと、すべてを再起動します。「A」タグを使用しているため、次のことが必要です。
1）＃をhref属性として追加する代わりに追加します（href="#").
2）遷移関数からfalseを返します。
function transition(question_id) {
$('#question' + question_id).fadeOut('fast', function() {
question_id++;
if ($('#question' + question_id).length > 0) {
$('#question' + question_id).fadeIn('fast');
} else {}
});
return false;
}
（フォーマットは申し訳ありませんが、投稿を10回編集しましたが、役に立たない）
他のヒント
次のものに合わせてHTMLを変更してみてください。
<div id="questions">
<div class="question" id="question1">
<span>Title</span>
<li><input type="radio" name="q_0" value="0"> 0</li>
<li><input type="radio" name="q_0" value="2">2</li>
<li><input type="radio" name="q_0" value="1">1</li>
<a href="#" class="next">Next</a>
</div>
<div class="question" id="question2">
<span>Title</span>
<li><input type="radio" name="q_1" value="2">2</li>
<li><input type="radio" name="q_1" value="0">0</li>
<li><input type="radio" name="q_1" value="1">1</li>
<a href="#" class="next">Next</a>
</div>
<div id="question3" class="question">
<span>Title</span>
<li><input type="radio" name="q_2" value="1">1</li>
<li><input type="radio" name="q_2" value="2">2</li>
<li><input type="radio" name="q_2" value="0">0</li>
<a href="#" class="next">Next</a>
</div>
</div>
そしてこれへのあなたのスクリプト：
$(function() {
$('div.question').hide();
$('div.question:first').show();
$('.next').click(function() {
transition($(this).closest('.question'));
return false;
});
});
function transition($question) {
$question.fadeOut('fast',function() {
if ($question.attr('id') !== $('.question:last').attr('id')) {
$question.next('.question').fadeIn('fast');
} else {
alert('done!');
}
});
}
控えめなJavaScriptの教訓を維持するために、リンクからオンクリックを削除し、jQueryで追加しました。
ここでデモを表示できます： http://jsfiddle.net/t7p45/
私の次のリンクはHTML、フッキングすべてのイベントにはjqueryのドキュメントの準備方法です。
<div id="questions">
<div id="question0" class="question">
<span style="verhnij">Title 1</span>
<li><input type="radio" name="q_0" value="0"> 0</li>
<li><input type="radio" name="q_0" value="2">2</li>
<li><input type="radio" name="q_0" value="1">1</li>
<a href="#" class="next">Next</a>
</div>
<div id="question1" class="question">
<span style="verhnij">Title 2</span>
<li><input type="radio" name="q_1" value="2">2</li>
<li><input type="radio" name="q_1" value="0">0</li>
<li><input type="radio" name="q_1" value="1">1</li>
<a href="#" class="next">Next</a>
</div>
<div id="question2" class="question">
<span style="verhnij">Title 3</span>
<li><input type="radio" name="q_2" value="1">1</li>
<li><input type="radio" name="q_2" value="2">2</li>
<li><input type="radio" name="q_2" value="0">0</li>
<a href="#" class="next">Next</a>
</div>
このjQueryもの
$(function(){
$('div.question').hide(); // hide all questions
$('#question0').show(); // show first one
$('a.next').click(function(e) { // hook up the click events
e.preventDefault(); // prevents the link from being followed
$(this).parent('div.question').fadeOut('fast');
$(this).parent('div.question').next().fadeIn('fast');
});
});
すでにここにチェック jsFiddleページ Iセットアップ作業で
思い過尽くしております。してみてください：
<div id="questions">
<div id="question0" class="question askme">
<span style="verhnij">Title 1</span>
<li><input type="radio" name="q_0" value="0"> 0</li>
<li><input type="radio" name="q_0" value="2">2</li>
<li><input type="radio" name="q_0" value="1">1</li>
<a href="next">Next</a>
</div>
<div id="question1" class="question askme">
<span style="verhnij">Title 2</span>
<li><input type="radio" name="q_1" value="2">2</li>
<li><input type="radio" name="q_1" value="0">0</li>
<li><input type="radio" name="q_1" value="1">1</li>
<a href="next">Next</a>
</div>
<div id="question2" class="question askme">
<span style="verhnij">Title 3</span>
<li><input type="radio" name="q_2" value="1">1</li>
<li><input type="radio" name="q_2" value="2">2</li>
<li><input type="radio" name="q_2" value="0">0</li>
<a href="next">Next</a>
</div>
JS:
$(function() {
$(".question").hide();
$(".question:first").show();
$("a").click(function() {
$(this).parent(".question").removeClass("askme").hide();
$(".askme:first").show();
return false;
});
});
い調節のためにこのビット、通いたいでんは非常に難しいと思います。A デモ.
所属していません StackOverflow
