Question

我正在使用jQuery UI进行简单的测验/游戏，可以为孩子们排序。我想让用户将列表分类为他们认为正确的顺序，然后按一个按钮检查他们的答案......然后将项目的颜色更正为绿色，不正确为红色。

所以，我的主要问题是如何查看列表并为项目着色。

我无法找到一种动态着色项目的方法;并且不确定jQuery中是否有一种简单的方法来检查订单。

注意：我不想做检查服务器端，所以假设脚本中的某些内容标识了正确的顺序（我知道它可以允许作弊，但我并不担心！）。

我对jQuery非常新！：）

编辑 - 认为我有解决方案......

我想我已经做到了。我的代码如下。我使用了这个code as my baseline然后使用.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;
    });

Answer 1

这是一个更合乎逻辑的问题。

分别创建一个css类“error”和另一个带有红色背景和绿色背景的“Correct”，如下所示。

.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请求拉取实际结果，然后将其与可排序列表状态顺序进行比较。

更改jquery可排序列表中的项目颜色

1 个答案: