在 jQuery/JavaScript 中为活动/非活动状态切换类答案

【问题标题】：switch class in jQuery/JavaScript for active/inactive state在 jQuery/JavaScript 中为活动/非活动状态切换类
【发布时间】：2017-10-20 23:23:14
【问题描述】：

我想要做的是，当您单击“登录”时，它会将“注册”按钮更改为“非活动”类，反之亦然。所以你点击的那个按钮是白色的并且突出，没有被使用的那个是淡出的。

Active/inactive state

如上图所示，注册表单处于非活动状态，而登录表处于活动状态。

但是我现在拥有的代码，当我在 2 之间单击时，它们都变为“活动”并且不会切换回来。

$(function() {
  $('.activebtn').click(function() {
    $('.activebtn').addClass("activebtn");
    $('.activebtn').removeClass("inactivebtn");
    $('.inactivebtn').removeClass('activebtn');
    $('inactivebtn').addClass('inactivebtn');
    $('#signup').slideUp("slow", function() {
      $('#signin').slideDown("slow");
    })
  })
});

$(function() {
  $('.inactivebtn').click(function() {
    $('.inactivebtn').removeClass("inactivebtn");
    $('.inactivebtn').addClass("activebtn");
    $('.activebtn').removeClass("activebtn");
    $('activebtn').addClass("inactivebtn");
    $('#signin').slideUp("slow", function() {
      $('#signup').slideDown("slow");
    });
  });
});

.activebtn {
  opacity: 1;
  text-align: center;
}

.inactivebtn {
  text-align: center;
  opacity: .5;
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebarmenu">
  <h1><a class="activebtn" href="#">Sign In</a></h1>
  <h1><a class="inactivebtn" href="#">Sign Up</a></h1><br><br>
</div>

我想你大概能猜到我在这里试图做什么，但它并没有像上面解释的那样工作。

【问题讨论】：

你可以尝试添加 .在类选择器中。
那没用，伙计，就好像它正在编辑本地项目，所以可以说你“点击”的项目，而不是其他项目。
那里有几个不错的答案。我想你想要造型.button 和.button:disabled。然后，您可以在 .click() 处理程序中使用 jQuery 的 .prop("disabled", true)（或 false），该处理程序确定要禁用哪个按钮（即在处理程序范围内 != this 的按钮）
奥利弗是你的男人，OP。他的回答既可爱又整洁。
是的，对社区刚刚的回复很满意，我的问题很快得到了解决……我已经使用了 sn-ps 并将页面添加到书签，以便在进行此类操作时可以重新访问事情又来了。我会尝试所有的答案，看看哪个效果更好:) 感谢您的帮助

标签： javascript jquery html css

【解决方案1】：

您最好只为活动按钮使用一个.active-class，为所有其他（通用）按钮使用.button-class。然后，切换活动状态就变得像听起来那么简单：

$(function() {
  $('.button').on('click', function() {
    $('.button').removeClass('active'); // reset *all* buttons to the default state
    $(this).addClass('active'); // mark only the click-target as active
  })
});

.button.active{
  opacity: 1;
  text-align: center;
}

.button{
  text-align: center;
  opacity: .5;
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebarmenu">
      <h1><a class="button active" href="#">Sign In</a></h1>
      <h1><a class="button" href="#">Sign Up</a></h1><br><br>
</div>

【讨论】：

在您的点击处理程序中，$('.button') 与 $(this) 不一样吗？对我来说，你的处理程序看起来像是要删除活动类并将其添加到同一个元素
没有。 $('.button') 将选择具有该类的所有 DOM 元素，而 this（或 $(this)，作为 jQ 对象）绑定到事件目标。
当然。我的错，对不起 - 除了我的大脑放屁，这绝对是最优雅的解决方案

【解决方案2】：

如果你想使用 2 个类：首先我们应该去掉这两个类，然后为元素设置默认的非活动状态，然后为发生点击的元素设置活动状态。试试这个代码：

$(document).ready(function() {
    $("#sidebarmenu a").on("click", function() {
        $(this).parents("#sidebarmenu").find("a").removeClass("activebtn inactivebtn").addClass("inactivebtn");;
        $(this).removeClass("inactivebtn").addClass("activebtn");
    });
});

  .activebtn{
  opacity: 1;
  text-align: center;
}

.inactivebtn{
  text-align: center;
  opacity: .5;
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebarmenu">
      <h1><a class="activebtn" href="#">Sign In</a></h1>
      <h1><a class="inactivebtn" href="#">Sign Up</a></h1><br><br>
</div>

【讨论】：

谢谢 Curveball，效果很好！我添加了该代码，并使用 JQuery 保持转换。

【解决方案3】：

或者你一个 .each 循环并检查 dom 上的类并执行你的类切换。

$(".activebtn, .inactivebtn").each(function(index, key){
    if(key.className == "activebtn"){
       $(this).removeClass("activebtn").addClass("inactivebtn")
    }else if(key.className == "inactivebtn"){
       $(this).removeClass("inactivebtn").addClass("activebtn")        
    }
})

$(document).ready(function(){
  setTimeout(function(){
  	$(".activebtn, .inactivebtn").each(function(index, key){
		if(key.className == "activebtn"){
    	$(this).removeClass("activebtn").addClass("inactivebtn")
    }else if(key.className == "inactivebtn"){
    	$(this).removeClass("inactivebtn").addClass("activebtn")        
    }
})
  }, 500)
})

.activebtn {
  opacity: 1;
  text-align: center;
}

.inactivebtn {
  text-align: center;
  opacity: .5;
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebarmenu">
  <h1><a class="activebtn" href="#">Sign In</a></h1>
  <h1><a class="inactivebtn" href="#">Sign Up</a></h1><br><br>
</div>

【讨论】：