jquery는 3 개 주 사이를 전환하고 아약스 전화를 게시합니까? 선택하지 않은 단지 회색 배경</li> <li>상태 # 2 : 녹색</li> <li>상태 # 2 선택한 설정 배경 : 클릭 수를 다시 설정 배경 빨간색으로

Question

나는

• 상태 # 1 3 주
  사이를 전환 할 필요가 이제 클릭 할 때마다 빨간색과 녹색이 번갈아 전환됩니다.

어떻게 가능합니까? 클래스를 변경하는 것 외에도 동시에 아약스 호출을해야합니다.

내가 기본적으로 그냥 원하는 것은 지금이 내가 어떻게 감지하는 아무 생각이없는 선택이 아닌 선택 토글 및 은 사용자가 우선 회색 상자를 처음

를 클릭입니다 :

<div id="test" onclick => "$(this).toggleClass('selected_yes')"> test <div> 

Answer 1

그럼 당신은 여전히 ​​toggle를 사용할 수 있습니다

$('#test').click(function() { 
    if (this.className.match(/green|red/)) $(this).toggleClass('green red'); 
    else $(this).toggleClass('green'); 

    // ajax call here 
});​ 

http://jsfiddle.net/DRZY2/

Answer 2

시도해 볼 수 있습니다.

$('#test').click(function(){ 
    var $this = $(this), state = $this.data('state') || ''; 
    if(state == ''){ 
     $this.addClass('greyBg'); 
     $this.data('state', 'unselected'); 
    } 
    else if(state == 'unselected'){ 
     $this.removeClass('greyBg').addClass('greenBg'); 
     $this.data('state', 'selected'); 
    } 
    else if(state == 'selected'){ 
     $this.removeClass('greyBg greenBg').addClass('redBg'); 
     $this.data('state', 'clicked'); 
    } 
    else{ 
     if($this.hasClass('redBg')){ 
      $this.removeClass('redBg').addClass('greenBg'); 
     } 
     else{ 
      $this.removeClass('greenBg').addClass('redBg'); 
     } 

     //Here you can make ajax call now 
    } 

}); 

때마다 당신은 내가 jQuery를 data 방법을 사용하여 그 상태를 유지하고 또한 필요한 로직을 실행하고 클릭합니다. 나는 이것이 당신에게 의미가 있기를 바랍니다.

적절한 스타일로 필수 클래스를 정의하십시오. 다음과 같이

.unselected { background-color: grey; } 
.selected { background-color: green; } 
.clicked { background-color: red; } 

그런 다음 당신이 그들을 사용할 수 있습니다 :

<div id="test" class="unselected">test<div> 

을 다음 테스트 요소 후 document.ready 또는 스크립트 블록 (

.greyBg { background-color: grey; } 
.greenBg { background-color: green; } 
.redBg { background-color: red; } 

Answer 3

세 수업을 가정) :

$("#test").click(function() { 
    var $this = $(this); 
    if ($this.hasClass("selected")) { 
     $this.removeClass("selected").addClass("clicked"); 
     // ajax here if needed 
    } else if ($this.hasClass("clicked")) { 
     $this.removeClass("clicked").addClass("selected"); 
     // ajax here if needed 
    } else if ($this.hasClass("unselected")) { 
     $this.removeClass("unselected").addClass("selected"); 
     // ajax here if needed 
    } 
}); 

데모 :

위의 내용은 자체적으로 설명해야합니다. 물론 더 적절하다면 Ajax 호출을 if/else 구조 외부에 배치 할 수 있지만 위와 같이 현재 상태에 따라 다른 Ajax 호출을 작성해야하는 경우에는 위와 같이 수행하십시오.

Answer 4

$('#test').click(function() { 
    var $this = $(this), clicked = $(this).hasClass('clicked'); 
    if (!clicked) { 
     $this.addClass('clicked'); 
    } else { 
     var isRed = $this.hasClass('red'); 
     $this.toggleClass('red', !isRed).toggleClass('green', isRed) 
    }   
    // do ajax 
})