点击按钮

Question

我在按钮上有代码

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

它会使按钮突出显示但是是否可以在那里添加一个检查语句，看看按钮是否已经突出显示并取消高亮显示它而不是让它保持突出显示？

Answer 1

您应该在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 2

您可以使用jQuery方法执行此操作：hasClass

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

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


});