第二次点击; jQuery

Question

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

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

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

我已经搜索了这个，askers似乎只需要.show/.hide事件可以用.toggle代替，这在这里显然不是这种情况。

Answer 1

因为你可能有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/

Answer 2

<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; 
} 
}); 

Answer 3

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

Answer 4

我想你需要的东西更通用的有关click事件正是因此我建议你使用data方法离开标志

$('.example').click(function() { 
    if (!$(this).data("custom-even")) { 
     // odd execution   
     $(this).data("custom-even", true) 
    } else { 
     // even execution 
     $(this).data("custom-even", false) 
    } 
});​ 

Answer 5

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

Answer 6

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

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

    if($(this).css('color') == "red") 
    { 
     $(this).css('color','blue'); 
    } 
    else 
    { 
     $(this).css('color','red'); 
    } 
}); 

Answer 7

你好试试和toggle :)）http://jsfiddle.net/FVXAZ/

所以你可以使用切换与你的CSS和每一秒的点击都会有副-A-反之亦然影响。 :)

代码

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

有一个很好的男人男人，干杯！

Answer 8

试试这个：

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

}); 

Answer 9

使用一个方法来处理一次性事件绑定是一个不错的选择，但是这种解决方案将停止所有活动后绑定这段代码，它可能会导致不一致。

$('.example') 
    .one('click', function(e) { 
    e.stopImmediagePropagation(); 
    }) 
    .on('click', function() { 
    $(this).css('color', blue'); 
    }); 

Answer 10

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

基本上，有两种方法应该使用。其他提到的方法是不正确的或者没有语义的（使用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' 
    } 
}) 

Answer 11

你可以写

$（ '＃ID'）切换（函数（）{

$（” CSS'）的CSS。 （ '颜色'， '红'）;}

，函数（）{/////////的第二次点击

$（ '的CSS。 '）的CSS（' 颜色'，。 'blue'）;} ）;