jquery在3個狀態之間切換併發布ajax調用？

之間切換

狀態＃1：未選中剛剛灰色背景
狀態＃2：精選集背景爲綠色
狀態＃2：被點擊一次，設置背景爲紅色現在每次點擊在紅色和綠色之間切換

這將如何可能？除了更改類之外，我還需要同時進行ajax調用。

我基本上只是要的是一個選擇，而不是選擇切換和我不知道如何檢測是用戶點擊灰色方塊中的第一次

對於初學者，我現在有：

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

來源

2012-02-27 Rubytastic

'Toggle'意味着兩種狀態。您不能在3種狀態之間切換。你需要手動循環。 – Dutchie432 2012-02-27 20:24:52

那麼你仍然可以使用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/

來源

2012-02-27 20:49:14 dfsq

這一個很好很短 – Rubytastic 2012-02-27 22:30:37

感謝所有的答案不得不選擇這一個，因爲它是最短和最有效的編碼解決方案 – Rubytastic 2012-02-27 22:31:48

你可以試試這個。

$('#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方法保持其狀態，並執行所需的邏輯。我希望這對你有意義。

用適當的樣式定義所需的類。

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

來源

2012-02-27 20:32:55 ShankarSangoli

@Rubytastic - 你試過這個嗎？ – ShankarSangoli 2012-02-27 21:55:55

已經嘗試過它很好用thx – Rubytastic 2012-02-27 22:30:54

假設你有三類：

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

然後就可以使用它們如下：

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

然後（在測試元件之後的document.ready或一個腳本塊）：

$("#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 
    } 
});

演示： http://jsfiddle.net/LLCMa/

以上內容應該不言自明。當然，如果更合適，您可以將您的Ajax調用放在if/else結構之外，但是如果您需要根據當前狀態進行不同的Ajax調用，則可以按上述方式進行。

來源

2012-02-27 20:48:01 nnnnnn

$('#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 
})

來源

2012-02-27 20:53:31 charlietfl

jquery在3個狀態之間切換併發布ajax調用？

回答

相關問題