Question

我正在尝试使用addClass和removeClass创建一个切换高亮效果。

<head>
    <style>
        .box-highlight {
            border: 2px solid yellow;
        }
    </style>
    <script type="text/javascript" src="javascript/vendor/jquery-2.0.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#box').bind('click', function() {
                if ($(this).hasClass('box-highlight')) {
                    $(this).removeClass('box-highlight');
                }
                $(this).addClass('box-highlight');
            });
        });
    </script>
</head>
<body>
    <div id="box" style="width: 100px; height: 100px; background-color: silver">

    </div>
</body>

addClass工作正常，但removeClass没有。我知道有一个toggleClass方法，但我只是想知道这个代码有什么问题。

Answer 1

在重新绘制UI之前，您正在删除该类，然后在没有延迟的情况下将其添加回来。你需要做一个或另一个，这表示else：

if ($(this).hasClass('box-highlight')) {
  $(this).removeClass('box-highlight')
} else {
  $(this).addClass('box-highlight')
}

Answer 2

您的代码存在的问题是它运行得非常快，您将看不到效果:)。要产生这种效果，您可以使用计时器或延迟。例如，你可以这样做：

  $("#box").addClass("box-highlight")
      .delay(300).queue(function(next){
      $(this).removeClass("box-highlight");
      next();
  });

Answer 3

试试这个................

$(document).ready(function() {
        $('#box').bind('click', function() {
            if ($(this).hasClass('box-highlight')) {
                $(this).removeClass('box-highlight');
            }else{
            $(this).addClass('box-highlight');
            }
        });
    });

addClass Working但不是removeClass

3 个答案: