第二次點擊; 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'）;} ）;