jQuery - 如果在同一個事件中條件相同的函數

Question

所以這就是我想要做的;

點擊一個按鈕來添加類「點擊」

點擊同一個按鈕上再次彈出警告。

當前警報出現在同一次點擊。

感謝

http://jsfiddle.net/bazzle/d68wsa32/

HTML

<div class="button"> 
button click here 
</div> 
<div class="button"> 
button click here 
</div> 
<div class="button"> 
button click here 
</div> 

jQuery的

$('.button').each(function(){ 

$(this).on('click',function(){ 

    $(this).addClass('clicked'); 

    if ($(this).hasClass('clicked')){  
     alert('bingo'); 
    }; 

}); 

}); 

CSS

.button{ 
background-color:red; 
color:white; 
padding:1em; 
margin:5px; 
text-align:center; 
} 

.clicked{ 
background-color:black; 
} 

Answer 1

切換代碼張望了一下：

if ($(this).hasClass('clicked')){  
     alert('bingo'); 
    } else { 
     $(this).addClass('clicked'); 
    }; 

Answer 2

您需要在if語句後有 $(this).addClass('clicked'); 。現在您正在添加課程，然後檢查課程。

Answer 3

只是做測試做的警報之前，並添加類，如果它不存在：

$('.button').each(function(){ 
    $(this).on('click',function(){ 

     if ($(this).hasClass('clicked')){  
      alert('bingo'); 
     } else { 
      $(this).addClass('clicked'); 
     } 

    }); 
}); 

但是，沒有任何道理可言爲那個each循環。相反：

$(".button").on('click',function(){ 

    if ($(this).hasClass('clicked')){  
     alert('bingo'); 
    } else { 
     $(this).addClass('clicked'); 
    } 

}); 

它仍然會每個按鈕的工作，因爲click事件處理程序中，this只會是指被點擊的元素。

如果您希望它切換，您也可以在alert之後使用removeClass，但我不確定您是否想這麼做。

Answer 4

只要做到這一點分開：

$(document).on("click", ".button:not(.clicked)", function() { 
    $(this).addClass("clicked"); 
}); 
$(document).on("click", ".button.clicked", function() { 
    alert("bingo"); 
}); 

Answer 5

也許這將工作：首先要看它是否具有類，否則添加。

$('.button').each(function(){ 
    $(this).on('click', function(){ 
     if ($(this).hasClass('clicked')){  
      alert('bingo'); 
     } else { 
      $(this).addClass('clicked'); 
     } 
    }); 
}); 

Answer 6

我覺得這個最好的解決您的問題： 只需將您的$(this).addClass('clicked');聲明if後。是這樣的...

if ($(this).hasClass('clicked')){  
    alert('bingo'); 
}; 

$(this).addClass('clicked'); 

Answer 7

each()沒有必要在這裏。

$('.button').on('click',function(){ 
    if ($(this).hasClass('clicked')) 
     alert('bingo'); 
    else 
     $(this).addClass('clicked'); 
});