的onclick的一個按鈕

Question

我有一個代碼在一個按鈕

onClick="$('img').removeClass('highlighted');$(this).addClass('highlighted') 

以及它將使該按鈕被突出顯示，但有可能在那裏添加檢查語句，看看是否按鈕已經突出顯示並dehighlight它而不是讓它保持突出顯示？

Answer 1

你可以使用jQuery的方法做到這一點：hasClass

onClick="if($('img').hasClass('highlighted')) {$('img').removeClass('highlighted');} else {$(this).addClass('highlighted')} 

Answer 2

你應該在JavaScript中使用.click代替，因爲它更容易閱讀和事後管理：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#button").click(function() { 
      if ($(this).hasClass('highlighted')) { 
       $('img').addClass('highlighted'); 
       $(this).removeClass('highlighted'); 
      } else { 
       $('img').removeClass('highlighted'); 
       $(this).addClass('highlighted'); 
      } 
     } 
    }); 
</script> 

您還可以使用toggleClass ：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#button").click(function() { 
      $('img').toggleClass('highlighted'); 
      $(this).toggleClass('highlighted'); 
     } 
    }); 
</script> 

Answer 3

該代碼看起來很瘋狂。你在使用jQuery嗎？如果是這樣，請在點擊處理程序中進行檢查。

$("img").on("click", function(event){ 

    var $this = $(this); 

    if($this.hasClass("highlighted")) { 
     $this.removeClass("highlighted") 
    } else { 
     $this.addClass("highlighted") 
    } 

}); 

這有幫助嗎？

Answer 4

很簡單老闆：使用hasClass（）

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

if($(this).hasClass('highlighted')){ 
    $('img').removeClass('highlighted'); 
} 
else{ 
$(this).addClass('highlighted') 
} 


});