Jquery - クイズ/テストコードを改善する

Question

ショップの管理者が指定したパスフレーズを入力した場合、または「テスト/クイズ」に合格した場合にのみ、ユーザーが製品を購入できるショップを「デモ」しています。このテストは、WhatsAppのようなインターフェイスで "発生"します。

私がjqueryで行う仕事のほとんどはトグルクラスなので、ロジックのビットで何かをしようとすると、私はlooongと醜いコードになります。 （コメント）

レッツ・コードは、それ自体で話す： http://jsfiddle.net/polmoneys/Eje2s/9/

これは動作しますが、私は質問の量を拡張したい場合は、このアプローチは、どこへ行く恐ろしい方法のように探して起動します。どのようにしてこのコードを改善できますか？

私は完全にマークアップを変更し、「位置」のアプローチ（私の現在の知識を超えたnth-child(i)グラマラスもので、ループのためのいくつかの並べ替え）を使用し、.next()、.is(:visible)などで遊ぶ必要がある場合、私は思っていました。

おかげ

EDIT： いくつかの試行錯誤の後、私は特定のコードの一部を削減し、 それはより汎用的にすることができます（消去フィドル私はポストごとに2つのリンクを置くことができるよう）

は、最終的な編集は

Flaterのアドバイスを試した後、私はこの思い付いた： （私はポストごとに2つのリンクを置くことができるように消去フィドル）

最初の文字が大文字*（ここではiOSを考えています）とクイズにタイマー/カウントダウンを適用する方法については、ユーザーからの両方の入力を有効なパスフレーズとして受け入れる方法が問題になります。

第一：私はフィドルにいくつかのコードを配置した、それは

メガ決勝編集解決 すべての問題:) http://jsfiddle.net/polmoneys/ZL5xx/11/

Answer 1

つのヒントを動作させることはできません。配列を利用する：

var pass_phrase_list = new Array(); 
pass_phrase_list["1"] = "boogedyboo"; 
pass_phrase_list["2"] = "flobbadobbadob"; 
... 

2nd。 IDの代わりにクラスを使用する。 IDを使用して配列のインデックスを識別します。もちろん

<input type="button" class="check_click" id="button_1" /> 
<input type="text" class="check_me" id="checkfield_1" /> 

$('.check_click').click(function(event) { 
    var id = $(this).attr("id").replace("button_",""); //gets the id of the button 

    var value = $("#checkfield_"+id).val();   //Gets the value of the input with the same ID. 

    if (value == pass_phrase_list[id]) {    //Checks the input value against the item in the array that has the same index. 
     ... 
    } 

    ... 
}); 

ユーザーがソースにJavaScriptコードを見ることができるので、私は、パスフレーズアレイを移入する別の方法をお勧めします。しかし、私はあなたが私はあなたが新しい質問などのロードに関するすべての基礎となるコードのために同様のアプローチを使用することができます

更新...

Answer 2

Coffeescriptは、これであなたを助けるかもしれません:)何を意味するかを理解してほしいです。少なくとも、コードをより読みやすくすることができ、jqueryでの作業が容易になります。それを使用する可能性はありますか？