2

我正在尝试使用 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 方法，但我只是想知道这段代码有什么问题。

4

3 回答 3

3

在重新绘制 UI 之前，您将删除该类，然后立即将其添加回来。您需要做一个或另一个，这表明else：

if ($(this).hasClass('box-highlight')) {
  $(this).removeClass('box-highlight')
} else {
  $(this).addClass('box-highlight')
}
于 2013-06-12T02:26:48.093 回答
0

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

  $("#box").addClass("box-highlight")
      .delay(300).queue(function(next){
      $(this).removeClass("box-highlight");
      next();
  });
于 2013-06-12T02:25:26.813 回答
0

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

$(document).ready(function() {
        $('#box').bind('click', function() {
            if ($(this).hasClass('box-highlight')) {
                $(this).removeClass('box-highlight');
            }else{
            $(this).addClass('box-highlight');
            }
        });
    });
于 2013-06-12T06:19:52.103 回答