Question

我有一个切换按钮，我有两个div，每个div都包含一个控件，当我点击切换按钮时，需要显示，另一个需要隐藏，反之亦然。通常这不会是一个问题，如果使用一个div，我只会使用切换，但有点卡在这个... 如你所见，我有一个叫做“隐藏”的课程。和它目前隐藏的div b。当我点击按钮时，应该看到b，应该隐藏div，反之亦然。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

所以，假设您在这里，div位于div的{{1}}内。{/ p>

现在，您必须检查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

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

为班级display: none;

.b

只需切换 .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，也可以为您的代码段$(".a, .b").toggleClass('hide');撰写

在两个控件之间切换

3 个答案: