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

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

当点击上面的代码时，它将应用.css. 现在我需要的是应用另一段代码（比方说），在第二次点击$(this).css('color','blue');时替换之前的代码。.example

我已经搜索过这个，提问者似乎只需要.show/.hide可以替换为的事件.toggle，这显然不是这里的情况。

4

11 回答 11

6

由于您可能有许多 class 实例example，因此仅使用单个变量来维护状态是不可行的，您可以做的是维护example自身内部每个实例的状态：

定义两个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

像这样的东西可以在两种颜色（或样式）之间切换。

$('.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

很多答案都定义了一个解决方案。

基本上，您应该使用两种方法。提到的其他方法要么性能不佳，要么没有语义（data用于这种解决方案是过分的）。以下是您可以使用的两种方法：

// 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

使用 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

嗨，试试这个toggle:)) http://jsfiddle.net/FVXAZ/

因此，您可以在 CSS 中使用切换，并且每一次点击都会产生反之亦然的影响。:)

代码

  $(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

使用one方法处理一次性事件绑定是一个不错的选择，但是此方案将停止此代码之后绑定的所有事件，这可能会导致不一致。

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

你可以写：

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

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

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

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