用拨动开关更换两个按钮

Question

I have the following code:

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

However, I would like to replace these 'Before' and 'After' buttons with a toggle switch (already made) in the form of a checkbox:

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

In a way that each time it's clicked it switches between the two functions. I guess this needs to be done inline since these are just two of many comparisons.

Thanks in advance.

PS: I would like to do with only with JS. No need for jQuery or other frameworks.

Answer 1

Here's a nice way to achieve this by listening for the toggle in javascript and setting the image to that of the custom data attribute set under the image tag.

 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> 

Taking this approach over CSS and Backgrounds or setting the second image URL in the javascript should help keep the code cleaner. Also by doing this, the code will be easier to scale to accommodate multiple images toggles on one page without changing the Javascript.

Answer 2

Try this.

 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

You can use onchange event to get the event on state change as below

 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

First of all you should never execute code in a handler the way you do. It's doable but in terms of readibility and maintainability it sucks, the handlers should only be used to fire a function.

It's fairly simple to achieve what you want. put the toggle code inside a div and put the image and the newly created div inside a container div. The div holding the toggle should include "display:none" in the css from the beginning so it is not shown, once you click on the button, you just need to hide the image and show the toggle switch div by changing "display:none" to "display:block"; Something like

<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

The simplest way to do this is to set the image as the background image of an element and then toggle that CSS setting by toggling the class that defines it:

 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>