0

子供向けのjQuery UIソート可能な簡単なクイズ/ゲームを作成しています。ユーザーにリストを正しい順序に並べ替えてもらい、ボタンを押して答えを確認してもらいたい...次に、正しいアイテムを緑に、正しくないものを赤に色付けします。

それで、私の主な質問は、リストをチェックしてアイテムに色を付ける方法です。

アイテムを動的に色付けする方法が見つかりません。順序を確認するための jQuery に組み込まれた簡単な方法があるかどうかはわかりません。

注: サーバー側でチェックを行いたくないので、スクリプト内の何かが正しい順序を識別していると仮定します (不正行為が可能になることはわかっていますが、心配していません!)。

私はjQueryが初めてです！:)

編集 - 解決策があると思います....

私はそれをやったと思います。私のコードは以下です。このコードをベースラインとして使用し、.addClass() と .removeClass() を使用して色を追加しました。この方法は大丈夫ですか？(コードは少しラフで準備が整っています。これが最適かどうかわからない方法論です)。

$(function() {
    $( "#button" ).click(function() {
        var result = $('#sortable').sortable('toArray');
        var correct = new Array("1","0","2","3","4","5","6");
        var myID;

        for (n=0;n<7;n++)
        {
            myID = "#" + n;
                $( String(myID) ).removeClass( "correct" );
                $( String(myID) ).removeClass( "wrong" );
        }

        for (i=0;i<result.length;i++)
        {

            if (result[i] == correct[i])
            {
                myID = "#" + result[i];
                $( String(myID) ).addClass( "correct" );
            }
            else
            {
                myID = "#" + result[i];
                $( String(myID) ).addClass( "wrong" );
            }

        }

        return false;
    });
4

1 に答える 1

0

これはより論理的な質問です。

以下のように、それぞれ赤い背景と緑の背景を持つ css クラス「エラー」と別の「修正」を作成します。

.error {   background-color: red;}
.correct {   background-color: green;}

疑似コードは、一般的な MVC パターンを考慮します [HttpPost] は、HTTP POST FORM リクエストを表します。コントローラー名は QuizController であり、アクションは次のとおりです。

public ActionResult RenderPuzzle(int id)
{
  return view(....);//modeled with list of options sorted with class set to "correct" for each sortable list element in view for the puzzle option.
}

{HttpPost]
public ActionResult RenderPuzzle(Option opts, int id)
{
    //check if model state is valid then check the ordering and set the class to error for wrong ordered list elements and also you can display the correct order adjacent to it. Form your view accordingly
    return view(...);
}

これは ajax を介して行うこともできます。ajax では、クライアント側でも部分的なビジネス ロジックを適用し、jquery メソッドを使用してクラス (エラーと修正) を並べ替え可能な要素に適用する必要があります。実際の結果は ajax リクエストで取得でき、ソート可能なリストの状態順序と比較できます。

于 2012-05-28T12:38:11.650 に答える