javascript - 如何通过jQuery使div状态动态变化？

我有一个div，其功能类似于YouTube的“订阅”按钮。 CSS上有3个类，分别作为状态和样式：.unactive（未订阅），active（订阅）和.remove（当鼠标悬停在订阅上时）。

例如，当按钮为“ .unactive”并且鼠标悬停时，添加类“ .active”。然后，当鼠标移出时，它将再次返回到“ .unactive”。如果单击，它将更改为“ .active”（并将内部文本更改为“ Subscribed”。还有更多...

但是，当我添加类'.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');
  });

最好的制作方法是什么？

最佳答案

为了解决这个问题，您可以使用toggleClass()更改hover()上的状态。这样，元素将在mouseout时返回其原始状态：

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

关于javascript - 如何通过jQuery使div状态动态变化？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43113712/