用拨动开关替换两个按钮

Question

我有以下代码：

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

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

提前谢谢。

PS：我只想用JS。不需要jQuery或其他框架。

Answer 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和Backgrounds上采用这种方法或在javascript中设置第二个图像URL应该有助于保持代码干净。同样通过这样做，代码将更容易扩展以适应一个页面上的多个图像切换，而无需更改 Javascript。

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

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

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

Answer 5

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

实现你想要的东西相当简单。将切换代码放在div 中，并将图像和新创建的div 放在容器div 中。持有切换开关的div 应该从一开始就在 css 中包含"display：none"，这样它就不会显示，一旦你点击按钮，你只需要隐藏图像并通过将"display：none"更改为"display：block"来显示切换开关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