我点击一个输入收音机，并通过再次点击更改图像src ...我如何改变图像回来它是如何？

Question

我有这样的代码：

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

点击输入型无线电..和是的，它必须是一个输入型收音机， 我不设法改变IMG SRC。 感谢一些jQuery代码，我可以设法关闭输入收音机。但改变后的图像仍然保持原来的状态。 因此，当我关闭输入类型收音机我想回到原来的img src。 我该如何做到这一点？

对不起，但JavaScript或jQuery不是我最强的技能，但你可以验证我要求什么，只是检查上面的网址。

谢谢！

Answer 1

我删除了onclick处理程序，并添加了一个数据属性来换出网址。

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

Answer 2

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