我點擊一個輸入收音機，並通過再次點擊更改圖像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/