クリックごとにボタンの設定と値を回転させて繰り返します。

Question

ボタンを表示しようとしていますが、「マークされていません」から始まります。ユーザーがボタンをクリックすると、次のボタン「フォーム」に変更する必要があります。これらのクリックのそれぞれが発生すると、ボタンのIDに関連付けられたデータベースの値を更新するために、ajaxを使用して行われた投稿要求が必要です。このIDは、ボタンの隣に他の情報が表示されているデータベースから取得されます。私はその部分はonclick = functionname（123456）イベントで行われると信じていますか？ユーザーが最後に到達すると（完了）、別のクリックがマークされていない状態で開始されます。私がやろうとしていますし、非常に新しいjqueryの/アヤックス/

<button type="button" name="Unmarked" value="0" class="btn btn-default"/>Unmarked</button> 
<button type="button" name="Form" value="1" class="btn btn-info"/>Form</button> 
<button type="button" name="Frame" value="2" class="btn btn-primary"/>Frame</button> 
<button type="button" name="S/NB" value="3" class="btn btn-warning"/>S/NB</button> 
<button type="button" name="S/B" value="4" class="btn btn-danger"/>S/B</button> 
<button type="button" name="Completed" value="5" class="btn btn-success"/>Completed</button> 

私は誰かができる願っていますしjavascriptのものに関連する何かを見つけることができませんでしたが

私は時間のためにStackOverflowを検索してきました少なくとも私は正しい方向に向いています。あなたのコメントに基づいて

Answer 1

...

私たちはあなたを介して反復処理したいアイテムIDの配列を持っています。

var buttonArray = ["unmarked", "form", "frame", "snb", "sb", "completed"]; 

我々は最後に、我々は、すべてのボタンのクリックで表示を変更する関数を呼び出します現在可視

var currentItemIndex = 0; 

している項目を追跡します。

function changeButtonVisibility() { 
    var buttonClicked = $("#" + buttonArray[currentItemIndex]); 
    var nextItemIndex = 0; 

    if(currentItemIndex + 1 > buttonArray.length - 1) { 
    nextItemIndex = 0; 
    } else { 
    nextItemIndex = currentItemIndex + 1; 
    } 

    var nextButton = $("#" + buttonArray[nextItemIndex]); 
    currentItemIndex = nextItemIndex; 

    buttonClicked.addClass("hidden"); 
    nextButton.removeClass("hidden"); 
} 

基本的に、あなたは、現在のボタンを取る隠しクラスを追加し、[次​​へ]ボタンを取り、隠されたクラスを削除します。 ifステートメントは、最後のアイテムにヒットした場合、最初のアイテムからやり直すことを保証します。

最後に、このボタンをクリックイベントとしてバインドします。

$("#unmarked").click(function() { 
    changeButtonVisibility(); 
}); 

$("#form").click(function() { 
... 

特定のユースケースによっては、これを解決するためのより洗練された方法が考えられます。また、いくつかのコード行を間違いなく削除することもできます。しかし、この例では、問題を解決するための出発点やアイデアが得られれば幸いです。

の作業例：jsbin.com/xeyejesaxe