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 回答