Question

我试图用一个按钮在两个sections之间切换可见性。

我有两个部分，一个用于signin，另一个用于register。我希望用户能够在这些部分之间切换

初始点击事件有效，但是我不知道如何翻转点击事件以交换下一次点击。

<div class="container">
  <button id="btn">Click</button>
  <section id="register" class="active"></section>
  <section id="signup" class="hide"></section>
</div>

  let btn = $('#btn')
  let login = $('#login');
  let register = $('#register');

  btn.on('click',(e)=>{
   e.preventDefault(); 
   register.removeClass('active').addClass('hide');
   login.removeClass('hide').addClass('active');

  })

Answer 1

只需使用toggleClass：

btn.on('click',(e)=>{
    e.preventDefault(); 
    register.toggleClass('active hide');
    login.toggleClass('active hide');
});

假设其中一个具有active，而另一个具有hide，将在它们之间切换。

除非您在代码的其他地方使用login和register，否则可以将它们组合在一起。

let btn = $('#btn')
let panels = $('#login, #register');
btn.on('click',(e)=>{
    e.preventDefault(); 
    panels.toggleClass('active hide');
});

实时示例：

let btn = $('#btn')
let panels = $('#login, #register');
btn.on('click',(e)=>{
    e.preventDefault(); 
    panels.toggleClass('active hide');
});

.hide {
    display: none;
}

<div class="container">
  <button id="btn">Click</button>
  <section id="register" class="active">register</section>
  <section id="login" class="hide">login</section>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

请注意，除非您将active用于其他用途，否则您将不需要它：

let btn = $('#btn')
let panels = $('#login, #register');
btn.on('click',(e)=>{
    e.preventDefault(); 
    panels.toggleClass('hide');
});

.hide {
    display: none;
}

<div class="container">
  <button id="btn">Click</button>
  <section id="register">register</section>
  <section id="login" class="hide">login</section>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

旁注：您的HTML定义了带有id和register的部分，但是您的代码需要signup和register。我已经在上面的实时示例中修复了该问题。

如何在两个元素之间切换

1 个答案: