jquery에서 항목의 색상 변경 가능 목록

jQuery UI를 사용하여 간단한 정렬을 할 수있는 간단한 퀴즈/게임을 만들고 있습니다. 나는 사용자가 목록을 올바른 순서라고 생각하는 것으로 분류하고 대답을 확인하기 위해 버튼을 누른 다음 올바른 항목을 녹색으로 표시하고 빨간색으로 잘못 표시하도록합니다.jquery에서 항목의 색상 변경 가능 목록

그래서 내 주요 질문은 목록을 확인하고 항목의 색상을 지정하는 방법입니다.

항목을 동적으로 색칠하는 방법을 찾을 수 없습니다. 순서를 확인하기위한 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; 
    });

출처

2012-05-28 SimpleOne

[시도한 내용] (http://whathaveyoutried.com)을 이미 게시하십시오. –

HTML을 게시 할 수 있습니까? sort 이벤트를 사용하여 현재 위치를 알려주고 변경 사항이 있는지 확인하십시오. var alert = '' $ (선택자) .each (function() {alert + = ','+ $ this} .attr ('class');})와 같은 위치를 사용하여 위치를 볼 수 있습니다. –

좋아 보인다. 그러나 정적 순서로 Java 스크립트 측에 올바른 순서를 저장하면 사용자가 한 번 시도하기 전에 사용자에게 응답을 표시 할 수 있습니다. 사용자는 소스 또는 공개 된 dev 도구를보고 찾을 수 있습니다. –

이것은 논리적 인 질문입니다.

아래와 같이 빨간색 배경과 녹색 배경으로 각각 CSS 클래스 "오류"와 "수정"을 만듭니다.

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

의사 코드는 일반적으로 MVC 패턴을 고려 [HttpPost] 나타내는 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를 사용하면 클라이언트 측에서도 부분적인 비즈니스 로직을 적용하고 jquery 메서드를 사용하여 정렬 가능한 요소에 클래스 (오류 및 수정)를 적용해야한다. 실제 결과는 ajax 요청으로 가져온 다음 정렬 가능한 목록 상태 순서와 비교할 수 있습니다.

출처

2012-05-28 12:38:11

jquery에서 항목의 색상 변경 가능 목록

답변

관련 문제