[英]I click an input radio and change an image src, by clicking again…how do I change the image back how it was?
I have this code: 我有这个代码:
https://jsfiddle.net/Suiberu/rxu8wgxf/ https://jsfiddle.net/Suiberu/rxu8wgxf/
//INPUT RADIO ON & OFF
var prv;
var markIt = function(e) {
if (prv === this && this.checked) {
this.checked = false;
prv = null;
} else {
prv = this;
}
};
$(function() {
$('input.limit_radio').on('click', markIt);
});
//CHANGE IMAGE
function changeImage(imgName) {
image = document.getElementById('theimage');
image.src = imgName;
}
Clicking on an input type radio.. and yes it has to be an input type radio, I do manage to change an img src. 点击一个输入类型的收音机..是的,它必须是一个输入类型的收音机,我设法改变一个img src。 Thanks to some jquery code I can manage to turn off the input radio.
感谢一些jquery代码,我可以设法关闭输入无线电。 But the changed image remains as it was changed in the first place.
但是改变后的图像仍然保留,因为它首先被改变了。 So when I turn off the input type radio I would like to get back the original img src.
因此,当我关闭输入类型的收音机时,我想找回原来的img src。 How do I achieve this?
我该如何实现这一目标?
Sorry, but javascript or jquery are not my strongest skills, but you can verify what am I asking for just checking the url above. 对不起,但javascript或jquery不是我最强的技能,但你可以验证我要求只检查上面的url。
Thanks! 谢谢!
I removed the onclick handler and added a data attribute to swap out the urls. 我删除了onclick处理程序并添加了一个数据属性来交换url。
https://jsfiddle.net/jjwilly16/37yn9xzy/1/ . https://jsfiddle.net/jjwilly16/37yn9xzy/1/ 。
<img src="http://www.cbc.ca/i/img/theme/default/plus-up.png" name="theimage" id="theimage" data-alternate="https://www.ucl.ac.uk/2034/images/icons/arrow-blue-left.png"/>
/INPUT RADIO ON & OFF
var prv;
var markIt = function(e) {
if (prv === this && this.checked) {
this.checked = false;
prv = null;
} else {
prv = this;
}
var img = document.getElementById('theimage'),
alternate = img.getAttribute('data-alternate'),
src = img.src;
img.src = alternate;
img.setAttribute('data-alternate', src);
};
$(function() {
$('input.limit_radio').on('click', markIt);
});
You can use mouseup
event, remove and replace the original <input type="radio">
element. 您可以使用
mouseup
事件,删除并替换原始的<input type="radio">
元素。
$(function() { var sources = ["https://www.ucl.ac.uk/2034/images/icons/arrow-blue-left.png" , "http://www.cbc.ca/i/img/theme/default/plus-up.png"]; var img = $("#theimage"); var clicked = false; function changeImage(e) { img.attr("src", function() { var checked = e.target.checked; if (!clicked || checked) { var clone = e.target.outerHTML; $(e.target).remove(); $(clone).insertAfter($("#theimage + br")); $(".limit_radio").prop("checked", !clicked ? true : !checked); } return (!clicked ? (clicked = true) : !checked) ? sources[0] : sources[1] }); } $(document).on("mouseup", "input.limit_radio", changeImage) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <img src="http://www.cbc.ca/i/img/theme/default/plus-up.png" name="theimage" id="theimage" /> <br> <input class="limit_radio" type="radio" name="edit_race" value="gnomin" id="race_gnomin">
jsfiddle https://jsfiddle.net/rxu8wgxf/5/ jsfiddle https://jsfiddle.net/rxu8wgxf/5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.