2 
<div class="example">
 Test
</div>

$('.example').click(function(){
 $(this).css('color','red');
});

上記のコードをクリックすると、が適用されます.css。ここで必要なのは、別のコード（たとえば）を適用して、2回目にクリックされた$(this).css('color','blue');ときに前のコードを置き換えることです。.example

私はこれを検索しましたが、質問者は.show/.hideで置き換えることができるイベントのみを必要としているようですが.toggle、ここでは明らかにそうではありません。

4

11 に答える 11

6

クラスのインスタンスが多数ある可能性があるためexample、単一の変数を使用して状態を維持することは現実的ではありません。実行できることは、exampleそれ自体の各インスタンスの状態を維持することです。

2つのcssクラスを定義する

.example { background:blue }
.example.red { background:red }

次に、クリック方法：

$('.example').click(function(){
 $(this).toggleClass('red');
});

新しいcssクラスを定義したくない場合はdata()、を使用して、状態が各クラス内で排他的であることを確認できます.example。これは、次のインスタンスが多数ある場合に役立ちます。.example

$('.example').click(function() {
    var color = $(this).data('color');
    if(color != 'blue') {
       $(this).css('color', 'blue');
       $(this).data('color', 'blue');
    } else {
       $(this).css('color', 'red');
       $(this).data('color', 'red');
    }
});

http://api.jquery.com/data/

于 2012-04-16T09:24:55.247 に答える
2

このようなものは、2つの色（またはスタイル）を切り替えるために機能します。

$('.example').click(function(){  

     if($(this).css('color') == "red")
     {
        $(this).css('color','blue');
     }
     else
     {
        $(this).css('color','red');
     }
});
于 2012-04-16T09:26:05.303 に答える
1 
<div class="example">
 Test
</div>

ブール値を維持するだけで完了です。

var isRed=false;
$('.example').click(function(){
 if(isRed)
 {
 $(this).css('color','blue');
 isRed=false;
 }
 else
 {
 $(this).css('color','red');
 isRed=true;
 }
});
于 2012-04-16T09:24:17.237 に答える
0

addClassとremoveClassを使用する

.blueColor
{
background-color: blue;
}

.redColor
{
background-color: red;
}

そして、JavaScriptでaddClass関数とremoveClass関数を使用します。

<script>

    $(document).ready(function(){
    $(".example").keypress(function() {
    if($(".example").val().length > 0)
    {
        $(".example").addClass("redColor");
    }
    else {
       if($(".example").val().length == 0) 
    {
    $(".example").addClass("blueColor");
    $(".example").removeClass("redColor");
    }
    }

    });
    });
    </script>
于 2012-04-16T09:25:28.613 に答える
0

クリックイベントについてもっと一般的なものが必要だと思うので、dataメソッドを使用してフラグを残すことをお勧めします

$('.example').click(function() {
    if (!$(this).data("custom-even")) {
        // odd execution        
        $(this).data("custom-even", true)
    } else {
        // even execution
        $(this).data("custom-even", false)
    }
});​
于 2012-04-16T09:25:50.200 に答える
0 
$('.example').click(function(){
   var theExample = $(this);
   if(theExample.hasClass("clicked")){
      theExample.css('color','blue').removeClass("clicked");
   }else{
      theExample.css('color','red').addClass("clicked");
   }
});

http://jsfiddle.net/SnDgh/

于 2012-04-16T09:26:03.507 に答える
0

Hiyaこれを試してみてくださいtoggle:)）http://jsfiddle.net/FVXAZ/

したがって、CSSでトグルを使用でき、1秒おきにクリックするとその逆の影響があります。:)

コード

  $(function() {
   $('.example').toggle(function() {
    $(this).css('color','red');
   }, function() {
    $(this).css('color','blue');
   });
  });

いい男を持って、乾杯！

于 2012-04-16T09:26:11.280 に答える
0

これを試して：

$('.example').click(function(){
      if($('.example').data('isAlreadyClicked')=='true')
      {
             $(this).css('color','blue');
             $('.example').data('isAlreadyClicked','false')
      } 
      else
      {
            $(this).css('color','red');
            $('.example').data('isAlreadyClicked','true') 
      }

});
于 2012-04-16T09:26:31.457 に答える
0

1つのメソッドを使用して1回限りのイベントバインディングを処理することをお勧めしますが、このソリューションは、このコードの後に​​バインドされたすべてのイベントを停止し、不整合を引き起こす可能性があります。

$('.example')
  .one('click', function(e) {
    e.stopImmediagePropagation();
  })
  .on('click', function() {
    $(this).css('color', blue');
  });
于 2012-04-16T09:28:07.703 に答える
0

多くの答えがすべて単一のソリューションを定義しています。

基本的に、2つの方法を使用する必要があります。言及されている他の方法は、パフォーマンスが悪いか、意味がありません（dataこの種のソリューションに使用するのはやり過ぎです）。使用できる2つの方法は次のとおりです。

// Toggle a class 'red' defined in your stylesheet
$('.example').on('click', function() {
    $(this).toggleClass('red')
})

// Toggle the color with an "if" check
$('.example').on('click', function() {
    if (this.style.color === 'red') { // using jQuery is not required
        this.style.color === 'blue'
    }
    else {
        this.style.color === 'red'
    }
})
于 2012-04-16T09:31:40.347 に答える
0

あなたは書ける：

$('#id').toggle(function() {

  $('.css').css('color','red');}

,function() {           /////////the second click

   $('.css').css('color','blue');}
);
于 2016-06-13T11:48:34.823 に答える