0

我需要在 3 个状态之间切换

  • 状态#1：未选中只是灰色背景
  • 状态#2：选定的背景设置为绿色
  • 状态#2：再次单击，将背景设置为红色 现在每次单击时在红色和绿色之间切换

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

我基本上只想要一个选择的，未选择的切换，我不知道如何检测用户第一次点击了灰色框

对于初学者，我现在有：

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

4 回答 4

2

那么你仍然可以使用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-27T20:49:14.560 回答
1

你可以试试这个。

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

});

每次单击时，我都会使用 jQuerydata方法维护其状态并执行所需的逻辑。我希望这对你有意义。

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

.greyBg   { background-color: grey; }
.greenBg  { background-color: green; }
.redBg    { background-color: red; }
于 2012-02-27T20:32:55.790 回答
1

假设你有三个类：

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

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

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

然后（在 test 元素之后的 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-27T20:48:01.200 回答
1 
$('#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-27T20:53:31.393 回答