Jquery和下一個淡入

Question

嘿傢伙，我有一個問題，我無法解決。我對jquery不太瞭解，所以我希望你能幫助我。

基本上我有一個測驗腳本，在div中有問題，我想當一個人檢查radiobox並按下「next question」按鈕時，當前div將淡出，並且下一個div將淡入。 下面是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> 

每個問題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 
    } 
    }); 
}  

與該腳本的問題是，當我按NEXT，它fadesOut和FadesIn好，然後準備函數覆蓋一切，並再次質疑0彈出。 幫助真的很感激。

謝謝。

Answer 1

你需要阻止該網頁，你當重裝工作點擊鏈接，否則你重新啓動整個事情：因爲你使用「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次，但無濟於事）

Answer 2

我已經改變了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 page我的設置就可以了

Answer 3

試着改變你的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!'); 
     } 
    }); 
} 

我已經從你的鏈接中刪除了onclick，並通過jQuery添加它們，以保持不顯眼的Javascript的戒律。

您可以查看這裏演示：http://jsfiddle.net/t7P45/

Answer 4

我覺得你過於複雜的事情了一下。嘗試了這一點：

<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 demo。