用拨动开关替换两个按钮

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>

但是，我想用复选框形式的切换开关（已经制作）替换这些 'Before' 和 'After' 按钮：

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

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

提前致谢。

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

Answer 1

您可以使用 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 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

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

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

Answer 4

最简单的方法是将图像设置为元素的背景图像，然后通过切换定义它的 class 来切换 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

这是实现此目的的好方法，方法是侦听 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。

用拨动开关替换两个按钮

Replace two buttons with a toggle switch

html

javascript

toggle

switch-statement