Question

我正在为我编码的网站寻求帮助。我有一个HTML和CSS切换按钮（或标签）：

HTML：

<label class="switch">
  <input type="checkbox"></input>
  <div class="slider round"></div>
</label>

CSS：

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;

}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

以下是按钮的外观：https://jsfiddle.net/pbxn2egc/

基本上我想要或正在尝试做的是当按钮被切换时，我希望它显示5个项目的价格（我硬编码，所以像标准的HTML），然后当你切换按钮它会隐藏该文本并通过显示该文本显示竞争对手的价格。

因此，如果按下按钮，我想要沃尔玛的价格。如果按钮向右切换，则沃尔玛的价格会隐藏，并且Target会出现在同一位置。

有人可以帮助我吗？谢谢！

Answer 1

一种方法是在onchange元素上监听<input>事件。

然后，当选中/取消选中该框时，您可以确定哪个元素（价格）可见并显示另一个元素。

document.getElementById("mySwitch").onchange = function() {
  var priceA = document.getElementById("priceA");
  var priceB = document.getElementById("priceB");
  if (priceA.classList.contains("hidden")) {
    priceA.className = "shown";
    priceB.className = "hidden";
  } else if (priceB.classList.contains("hidden")) {
    priceB.className = "shown";
    priceA.className = "hidden";
  }
}

.shown {
}

.hidden {
  display: none;
}

<input type="checkbox" id="mySwitch"></input>
<div class="slider round"></div>

<div id="priceA" class="shown">Price A</div>
<div id="priceB" class="hidden">Price B</div>

如果你正在使用jQuery，那么有一个toggleClass()方法会自动在两个类之间切换一个元素。

Answer 2

function togglePrices() {  
  Array.from(document.querySelectorAll('.price')).forEach(function (f) {
    f.classList.toggle('hidden');
  });
}

.hidden {
  display: none;
}

<input type="checkbox" onchange="togglePrices()">  Competitors Price

<div class="price">
  <h3>Our Price</h3>
  water $10.00<br/>
  beer $12.00<br/>
  wine $20.00
</div>

<div class="price hidden">
  <h3>Competitors Price</h3>
  water $12.00<br/>
  beer $15.00<br/>
  wine $24.00
</div>

Answer 3

与@rphv的答案相比，我就是这样做的......

我有div的定价;其中我们的价格为div，另一个为他们的价格。定价容器在页面上是唯一的，我给它一个ID来表示它的用途。

我给两个价格组各两个类;他们都得到了班级＆＃34;价格＆＃34;然后要么＆＃34;我们的＆＃34;或者＆＃34;他们＆＃34;再次描述他们是什么（不是他们看起来如何）

HTML现在是它所包含数据的描述性结构，不会影响外观（因为外观是CSS的工作，而不是HTML）

我们开始显示 我们的 价格，所以我们用＃34;我们的＆＃34;当它们在定价div #pricing .price.ours内时显示;课堂上的东西＆＃34;他们的＆＃34;是不显示#pricing .price.theirs。

稍后，当定价div有他们的他们时，我们会显示他们的价格，而不是我们的价格 - 所以让我们联系我们。

应该更喜欢将事件处理程序附加到使用内联＆＃34; onevent＆＃34; javascript处理程序，因此我为复选框添加了一个ID以便轻松选择它，然后使用addEventListener以便更改事件将调用togglePrices togglePrices可能是一个单行，我只分配了var，因为你经常想用所选元素做几件事。在这里，我只是简单地切换班级＆＃34;他们的＆＃34;打开和关闭。

当切换该类时会发生什么，它只是使一组不同的CSS规则适用于内部价格div。一个＆＃34;我们的＆＃34;在他们的＆＃34;他们的＆＃34;不显示frp，#pricing.theirs .price.ours规则。 .theirs 中的.theirs会显示。

我希望堆栈片段反向显示使用的顺序 - 我认为这个演示更有意义首先阅读HTML，然后是CSS，第三个是JS。

＆＃13;
＆＃13;
function togglePrices() { var pricing = document.getElementById('pricing'); pricing.classList.toggle('theirs'); } document.getElementById('competition') .addEventListener('change', togglePrices);
＆＃13;
#pricing { margin-top: 1em; } #pricing .price.ours, #pricing.theirs .price.theirs { display: block; } #pricing .price.theirs, #pricing.theirs .price.ours { display: none; }
＆＃13;
<input type="checkbox" id="competition"> <label for="competition">Competitor's Price</label> <div id="pricing"> <div class="price ours"> <strong>Our Price</strong><br> water $1.00<br> beer $3.00<br> wine $4.50 </div> <div class="price theirs"> <strong>Competitors Price</strong><br> water $1.25<br> beer $4.00<br> wine $5.50 </div> </div>
＆＃13;
＆＃13;
＆＃13;

切换按钮 - 切换html

3 个答案: