Изменить цвет элементов в отсортированном списке jquery

Я делаю простую викторину/игру, используя пользовательский интерфейс jQuery для сортировки. Я хочу, чтобы пользователь отсортировал список в том, что, по их мнению, правильный порядок, а затем нажмите кнопку, чтобы проверить их ответ ... затем правильно настройте цветные зеленые и неправильные цвета.Изменить цвет элементов в отсортированном списке jquery

Итак, мой главный вопрос: как проверить список и покрасить элементы.

Я не могу найти способ динамического цвета элементов; и не уверен, что в jQuery есть простой способ проверить порядок.

Примечание: я не хочу, чтобы сервер проверки проверял, что внутри скрипта указано, что правильный порядок (я знаю, что он может разрешить обман, но я не беспокоюсь об этом!).

Я ОЧЕНЬ новичок в jQuery! :)

EDIT - Подумайте, у меня есть решение ....

Я думаю, что я сделал это. Мой код ниже. Я использовал этот 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; 
    });

источник

2012-05-28 SimpleOne

Пожалуйста, напишите [что вы пробовали] (http://whathaveyoutried.com) уже. –

Можете ли вы разместить свой HTML-код? Попробуйте использовать событие сортировки, чтобы предупредить текущую позицию и посмотреть, не меняется ли она. Вы можете видеть позицию, используя что-то вроде var alert = '' $ (selector) .each (function() {alert + = ',' + $ (this) .attr ('class');}); –

Выглядит хорошо. Однако сохранение правильной последовательности на стороне java-скрипта статическим образом может выявить ответы пользователей даже до того, как они попытаются сделать это за один раз. Пользователи могут просматривать исходные или открытые инструменты для поиска. –

Это более логичный вопрос.

создать класс ошибки «css» и еще один «Исправить» с красным фоном и зеленым фоном соответственно, как показано ниже.

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

псевдокод рассмотрим общую схему MVC [HttpPost] представляет запрос FORM HTTP POST Я предполагаю, что ваше имя контроллера 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-28 12:38:11

Изменить цвет элементов в отсортированном списке jquery

ответ

Смежные вопросы