Question

我有一个div作为按钮，类似于Youtube“订阅”按钮。 CSS有3个类作为状态和样式：.unactive（未订阅），活动（订阅）和.remove（鼠标在订阅时结束）。

例如，当按钮为'.unactive且鼠标结束时，添加类'.active'。然后当鼠标退出时，它再次返回'.unactive'。如果我点击，则将其更改为“.active”（并将内部文本更改为“已订阅”。还有更多......

但是，当我添加“.unactive”类并以“din”方式删除“.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()上的状态。这样，元素将在mouseout上返回到它的原始状态：

$('.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>

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

3 个答案: