在两个控件之间切换

Question

我有一个切换按钮，我有两个 div，每个 div 将包含一个控件，当我单击切换按钮时，一个需要显示，另一个需要隐藏，反之亦然。 通常这不会是一个问题，如果使用一个 div，我只会使用切换，但有点卡在这个上...... 如您所见，我有一个名为“hide”的类，它当前隐藏着 div b。当我单击按钮时，应该可以看到 b，并且应该隐藏 div a，反之亦然。

我正在使用 if 语句，它开始变得混乱并开始重叠。

简而言之，我需要在两个 div 之间交换隐藏类

$('#btn').on('click', () => {

});

.a {
  width: 150px;
  height: 100px;
  background-color: green;
  position: absolute;
}

.b {
  width: 150px;
  height: 100px;
  background-color: yellow;
  position: absolute;
}

.hide {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="a"> A </div>
  <div class="b hide"> B </div>
</div>
<br><br><br><br><br><br>
<button id="btn">Click</button>

Answer 1

您需要确定您将用于切换的 2 个div 是什么。

假设你在这里有 div 里面的 div 类 container。

现在您必须检查是否有 div 内部有 hide 必须将其删除，并且不应该添加 hide 类。

解决方案如下：

$('#btn').on('click', () => {
  $(".container > div").toggleClass('hide');
});

.a {
  width: 150px;
  height: 100px;
  background-color: green;
  position: absolute;
}

.b {
  width: 150px;
  height: 100px;
  background-color: yellow;
  position: absolute;
}

.hide {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="a"> A </div>
  <div class="b hide"> B </div>
</div>
<br><br><br><br><br><br>
<button id="btn">Click</button>

Answer 2

.hide {
  display:none;
}
//class for the div that is being shown
.unhide {
  display:block;
}

//have div 1 with class unhide initially
<div class="a unhide"> A </div>
<div class="b hide"> B </div>

//Grab both divs then remove classes and add classes
$('#btn').on('click', () => {
    $divToHide = $('div.unhide');
    $divToShow = $('div.hide');

    $divToHide.removeClass('unhide').addClass('hide');
    $divToShow.removeClass('hide').addClass('unhide');
});

Answer 3

这似乎根本不是问题。 只需执行以下操作：

1. 为类.b定义display: none;

2. 只需 切换 .a 和 .b 只需将它们放在一起

   在 jquery 选择器中：$(".a, .b").toggle();

$('#btn').on('click', () => {
$(".a, .b").toggle();
});

.a {
  width: 150px;
  height: 100px;
  background-color: green;
  position: absolute;
}

.b {
  width: 150px;
  height: 100px;
  background-color: yellow;
  position: absolute;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="a"> A </div>
  <div class="b"> B </div>
</div>
<br><br><br><br><br><br>
<button id="btn">Click</button>

即使你渴望使用 .hide 类，你也可以为你的 sn-p 写 $(".a, .b").toggleClass('hide');