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

【问题标题】：Change colour of items in jquery sortable list更改 jquery 可排序列表中项目的颜色
【发布时间】：2012-05-28 12:19:45
【问题描述】：

我正在使用 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;
    });

【问题讨论】：

请先发帖what you've tried。
你能发布你的 HTML 吗？尝试使用排序事件来提醒当前位置，看看它是否改变。您可以使用类似 var alert='' $(selector).each(function(){ alert += ', '+$(this).attr('class');}); 的方式查看位置
看起来不错。然而，以静态方式在 java 脚本端存储正确的序列甚至可以在用户尝试一次之前向用户揭示答案。用户可以查看源代码或打开开发工具进行查找。

标签： jquery-ui jquery-ui-sortable

【解决方案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请求拉取，然后与可排序的列表状态顺序进行比较。

【讨论】：