addClass工作但不刪除類

我想創建一個使用addClass和removeClass的切換高亮效果。addClass工作但不刪除類

<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方法，但我只是想知道這段代碼有什麼問題。

來源

2013-06-12 randacun

你如何知道'removeClass（）'不工作？您正在移除課程，然後立即再次添加。所以當然這個元素在這個函數完成執行時仍然會有這個類。 – Travesty3

您要移除類，然後用無延遲加回，用戶界面可重畫前。你需要做一個或其他，這表明一個else：

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

來源

2013-06-12 02:26:48 meagar

Y，我忘了其他部分。謝謝。 – randacun

你的代碼的問題是它運行速度非常快，你不會看到效果:)。爲了達到這樣的效果，您可以使用定時器或延遲。例如，你可以這樣做：

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

來源

2013-06-12 02:25:26

試試這個................

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

來源

2013-06-12 06:19:52 pardeep

addClass工作但不刪除類

回答

相關問題