<div class="example">
Test
</div>
$('.example').click(function(){
$(this).css('color','red');
});
当点击上面的代码时，它将应用.css. 现在我需要的是应用另一段代码（比方说），在第二次点击$(this).css('color','blue');时替换之前的代码。.example
我已经搜索过这个，提问者似乎只需要.show/.hide可以替换为的事件.toggle，这显然不是这里的情况。
由于您可能有许多 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');
}
});
像这样的东西可以在两种颜色（或样式）之间切换。
$('.example').click(function(){
if($(this).css('color') == "red")
{
$(this).css('color','blue');
}
else
{
$(this).css('color','red');
}
});
<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;
}
});
很多答案都定义了一个解决方案。
基本上，您应该使用两种方法。提到的其他方法要么性能不佳，要么没有语义（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'
}
})
使用 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>
我想你需要一些关于点击事件更通用的东西，所以我建议你使用data方法来留下标志
$('.example').click(function() {
if (!$(this).data("custom-even")) {
// odd execution
$(this).data("custom-even", true)
} else {
// even execution
$(this).data("custom-even", false)
}
});
$('.example').click(function(){
var theExample = $(this);
if(theExample.hasClass("clicked")){
theExample.css('color','blue').removeClass("clicked");
}else{
theExample.css('color','red').addClass("clicked");
}
});
嗨，试试这个toggle:)) http://jsfiddle.net/FVXAZ/
因此，您可以在 CSS 中使用切换，并且每一次点击都会产生反之亦然的影响。:)
代码
$(function() {
$('.example').toggle(function() {
$(this).css('color','red');
}, function() {
$(this).css('color','blue');
});
});
有个好男人，加油！
尝试这个：
$('.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')
}
});
使用one方法处理一次性事件绑定是一个不错的选择，但是此方案将停止此代码之后绑定的所有事件，这可能会导致不一致。
$('.example')
.one('click', function(e) {
e.stopImmediagePropagation();
})
.on('click', function() {
$(this).css('color', blue');
});
你可以写：
$('#id').toggle(function() {
$('.css').css('color','red');}
,function() { /////////the second click
$('.css').css('color','blue');}
);