如何通过 JQuery 使 div 状态动态更改

Question

我有一个div作为类似于Youtube"订阅"按钮的按钮。CSS 上有 3 个类作为状态和样式工作：.unactive(未订阅(、active(订阅(和 .remove (当鼠标悬停在订阅时(。

例如，当按钮为".unactive 且鼠标悬停时，添加类".active"。然后，当鼠标退出时，它会再次返回到".unactive"。如果我单击，它会更改为".active"(并将里面的文本更改为"订阅"。还有更多...

但是当我添加类".unactive"并动态删除".active"时，我无法再次识别/选择div 以删除".active"并再次返回".unactive"。

    $('.btn-circle.unactive').mouseover(function(){
    $(this).addClass('active').removeClass('unactive');
  });
  $('.btn-circle.active').mouseout(function(){
    $(this).addClass('unactive').removeClass('active');
  });

最好的制作方法是什么？

Answer 1

要解决此问题，您可以使用toggleClass()来更改hover()的状态。这样，元素将在鼠标退出时返回到其原始状态：

$('.btn-circle').hover(function(){
  $(this).toggleClass('active unactive');
});

Answer 2

也许.toggleClass()可以解决这个问题？

http://api.jquery.com/toggleclass/

Answer 3

您可以按照下面提到的方式进行。

	jQuery(document).ready(function($){
  		$(".subscribe-btn").hover(function(){
  			$(this).addClass("active");
  			$(this).removeClass("unActive");
  		}, function(){
  			$(this).removeClass("active");
  			$(this).addClass("unActive");
  		});
	}); 

.subscribe-btn{font:16px arial; color: #000; border-radius:6px; padding:7px 20px; cursor: pointer}
	.subscribe-btn.unActive{background: #ccc; border:2px solid #666; }
	.subscribe-btn.active{background: #333; border:2px solid #666; color: #fff;}	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <button class="subscribe-btn unActive" type="button">Subscribe</button>