用拨动开关代替两个按钮答案

【问题标题】：Replace two buttons with a toggle switch用拨动开关代替两个按钮
【发布时间】：2017-11-15 20:57:57
【问题描述】：

我有以下代码：

<img id="v1" src="pic1.jpg"><br>
<button onclick="document.getElementById('v1').src='pic1.jpg'">Before</button>
<button onclick="document.getElementById('v1').src='pic2.jpg'">After</button>
<br>
<img id="v2" src="pic3.jpg"><br>
<button onclick="document.getElementById('v2').src='pic3.jpg'">Before</button>
<button onclick="document.getElementById('v2').src='pic4.jpg'">After</button>
<br>

但是，我想用复选框形式的切换开关（已经制作）替换这些“之前”和“之后”按钮：

<label class="switchBA">
<input type="checkbox" checked>
<span class="slider"></span>
</label>

每次点击它都会在两个功能之间切换。我想这需要内联完成，因为这只是众多比较中的两个。

提前致谢。

P.S：我只想用 JS 来做。不需要 jQuery 或其他框架。

【问题讨论】：

你试过什么？您是否有具体问题要我们帮助解决，或者您要我们为您编写代码？

标签： javascript html switch-statement toggle

【解决方案1】：

这是实现此目的的好方法，方法是侦听 javascript 中的切换并将图像设置为图像标记下设置的自定义数据属性。

var toggleClass = document.getElementsByClassName("toggle");

var toggleFunction = function() {
  var imageElement = this.parentElement.parentElement.getElementsByClassName("imageItem")[0];
  if(this.checked){
    imageElement.src = imageElement.getAttribute("data-image-2");
  }else{
    imageElement.src = imageElement.getAttribute("data-image-1");
  }
};

for (var i = 0; i < toggleClass.length; i++) {
    toggleClass[i].addEventListener('click', toggleFunction, false);
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.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);
}

<h2>Toggle Image Demo</h2>
<div class="imageContainer">
  <img class="imageItem" src="https://lorempixel.com/400/200/sports/5/Image1/" data-image-1="https://lorempixel.com/400/200/sports/5/Image1/" data-image-2="https://lorempixel.com/400/200/sports/6/Image2/">

  <label class="switch">
    <input class="toggle" type="checkbox">
    <span class="slider"></span>
  </label>
</div>
<div class="imageContainer">
  <img class="imageItem" src="https://lorempixel.com/400/200/sports/5/Image1/" data-image-1="https://lorempixel.com/400/200/sports/5/Image1/" data-image-2="https://lorempixel.com/400/200/sports/6/Image2/">

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

在 CSS 和背景上采用这种方法或在 javascript 中设置第二个图像 URL 应该有助于保持代码更简洁。同样通过这样做，代码将更容易扩展以适应一页上的多个图像切换，而无需更改 Javascript。

【讨论】：

感谢您的帮助。数据属性是一个很好的解决方案。这确实解决了我的问题。

【解决方案2】：

试试这个。

function toggleImage(){
 var el = document.getElementById("toggle")
 if(el.checked){
 document.getElementById("v1").src="https://picsee.co/images/social_facebook.png";
 }
 else{
  document.getElementById("v1").src="https://picsee.co/images/social_twitter.png";
 }
}

<img id="v1" src="https://picsee.co/images/social_facebook.png">

<label class="switchBA">
<input type="checkbox" id="toggle" checked onclick="toggleImage()">
<span class="slider"></span>
</label>

【讨论】：

感谢您的帮助。这就是我想要的，但问题是切换功能与一个“id”相关联，我有超过 30 个单独的比较。你认为有没有更有效的方法？
你的意思是 30 个复选框？
是的。但是有人已经建议为每个元素使用属性，这最终会更容易一些。
@jedi_coder 是的，我明白了。你至少仍然可以给它一个赞成票；）
哦，我愿意，但还没有足够的声誉。只要我得到它，我就会去做。编辑：完成。 ;)

【解决方案3】：

您可以使用onchange 事件来获取状态更改事件，如下所示

function oncheckchange(e)
{
console.log(event.currentTarget.checked)
if(event.currentTarget.checked)
  document.getElementById('v2').src='pic4.jpg'
else 
  document.getElementById('v2').src='pic3.jpg'
}

<img id="v1" src="pic1.jpg"><br>
<button onclick="document.getElementById('v1').src='pic1.jpg'">Before</button>
<button onclick="document.getElementById('v1').src='pic2.jpg'">After</button>
<br>
<img id="v2" src="pic3.jpg"><br>
<button onclick="document.getElementById('v2').src='pic3.jpg'">Before</button>
<button onclick="document.getElementById('v2').src='pic4.jpg'">After</button>
<br>

<label class="switchBA">
<input type="checkbox" checked onchange="oncheckchange()">
<span class="slider"></span>
</label>

【讨论】：

【解决方案4】：

执行此操作的最简单方法是将图像设置为元素的背景图像，然后通过切换定义它的类来切换该 CSS 设置：

document.querySelector("input[type=checkbox]").addEventListener("click", function(){
  document.querySelector(".slider").classList.toggle("otherImage");
});

div {
  width:150px;
  height:150px;
  background-size:contain;
  border:1px solid black;
}

/* This will be the default style used because the class is defined in the HTML */
.slider {
  background-image:url("http://aws-cdn-01.shemazing.ie/wp-content/uploads/2015/09/disappointed-but-relieved-face.png");
}


/* This will be toggled on and off by the clicking of the checkbox. When it is 
   toggled on, it will override the previous background-image value. */
.otherImage {
  background-image:url("https://au.res.keymedia.com/files/image/emoji.jpg");
}

<label class="switchBA">
<input type="checkbox" checked>
<div class="slider"></div>
</label>

【讨论】：

【解决方案5】：

首先，您永远不应该以您的方式在处理程序中执行代码。这是可行的，但就可读性和可维护性而言，它很糟糕，处理程序只能用于触发函数。

实现您想要的非常简单。将切换代码放在 div 中，并将图像和新创建的 div 放在容器 div 中。保持切换的 div 应该从一开始就在 css 中包含“display:none”，所以它不会显示，一旦你点击按钮，你只需要隐藏图像并通过更改“display:none”来显示切换开关 div " 到 "显示：块"；像

<div class="container">
        <img id="image1"src="https://openclipart.org/download/216413/coniglio_rabbit_small.svg" alt="">
        <div id="toggle">
          <img id="image2"src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/sign-check-icon.png" alt="">
        </div>
        <button onclick="Change()">Click me</button>
      </div>

https://codepen.io/anon/pen/rYGMYx

【讨论】：