的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') 
} 


});