jQuery - はいの場合はコンテンツを表示し、いいえの場合はリダイレクトしますか？

Question

誰かが今日私にページのモックアップを見せてくれました。その考えは、ページの訪問者が質問と「はい」と「いいえ」のボタンがあるボックスを見ることになります。

その質問に「はい」をクリックすると、次のセクションに別の質問が表示され、さらに「はい」と「いいえ」の2つのボタンが表示されます。

「はい」をクリックすると、訪問者には3番目と最後のセクションが表示されます。

最初の2つの質問に対して[いいえ]をクリックした場合、別のセクションが表示されるか、別のページにリダイレクトされるという考えがあります。

これはjQueryで可能であり、toggle（）とscrollToを簡単に見てきました。後者は有望ですが、これに最も近づける方法について誰かが提案しているのだろうかと疑問に思っていましたか？

ありがとうございます！

Answer 1

私は過去にこれと似たようなことをしました。私がしたことの1つは、最初のアイテムが最後のものを知らない "ルーティング"システムのように実装したことでした。

は、これらの要素を考慮してください。

<div id="req1" data-yes="#req2" data-no="#reqno"> 
    Do you do stuff? 
    <button class="yes">Yes</button> 
    <button class="no">No</button> 
</div> 

<div id="req2" data-yes="#req3" data-no="#req1"> 
    <!-- content here... --> 
</div> 

<div id="req3" data-yes="#done" data-no=""> 
    <!-- content here... --> 
</div> 

... and so on 

あなたは、フローの処理/順序を知るために、タグに符号化されたデータを使用するために、いくつかの一般的なjQueryのを書くことができます。 data-yesとdata-noの値は、ワークフローの次の要素のセレクタです。

コードはこれらを総称して使用します。効果に何か...

$('div[data-yes]').each(function() { 
    var container = $(this); 
    // Bind "YES" 
    container.find('button.yes').click(function() { 
     var next = $(container.attr('data-yes')); 
     next.fadeIn(); 
     container.fadeOut(); 
    }); 
    // Bind "NO" 
    container.find('button.no').click(function() { 
     var next = $(container.attr('data-no')); 
     next.fadeIn(); 
     container.fadeOut(); 
    }); 
}); 

Answer 2

はこれを試してみてください：

$(".box .yes").click(function(e){ 
    $(this).closest(".box").hide().next().show(); 
}); 
$(".box .no").click(function(e){ 
    location.href = "/someredirecturl.htm"; 
}); 

のようなものになりますあなたのマークアップ：http://jsfiddle.net/LJ5Ha/