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), 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 に答える
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

次の 3 つのクラスがあるとします。

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

その後、次のように使用できます。

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

次に (document.ready または test 要素の後の script ブロック内):

$("#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 に答える