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

通过在javascript中监听切换并将图像设置为图像标记下的自定义数据属性集，可以实现此目的。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

试试这个。

＆＃13;

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";
 }
}

＆＃13;

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

＆＃13;

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

首先，你不应该像处理一样在处理程序中执行代码。这是可行的，但在可读性和可维护性方面很糟糕，处理程序应仅用于启动功能。

实现你想要的东西相当简单。将切换代码放在div中，并将图像和新创建的div放在容器div中。持有切换的div应包括＆＃34; display：none＆＃34;在css中从一开始就没有显示，一旦你点击按钮，你只需要隐藏图像并通过改变＆＃34; display：none＆＃34;来显示切换开关div。到＆＃34;显示：块＆＃34 ;; 像

这样的东西

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

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