Question

我需要在三种状态之间切换

州＃1：未选中仅灰色背景
州＃2：选择设置背景为绿色
州＃2：再次单击，将背景设置为红色现在每次点击都会在红色和绿色之间切换

这怎么可能？除了改变课程，我还需要同时进行ajax调用。

我基本上只想要一个选定的，而不是选择的切换和我不知道如何检测用户是否第一次点击灰框

对于初学者我现在有：

<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方法维护其状态，并执行所需的逻辑。我希望这对你有意义。

使用适当的样式定义所需的类。

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

Answer 3

假设您有三个班级：

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

然后您可以按如下方式使用它们：

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

然后（在document.ready或test元素之后的脚本块中）：

$("#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调用，请执行上述操作。

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
})

jquery在3个状态之间切换并发布ajax调用？

4 个答案: