我點擊一個輸入收音機並通過再次點擊更改圖像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不是我最強的技能，但你可以驗證我要求只檢查上面的url。

謝謝！

Answer 1

我刪除了onclick處理程序並添加了一個數據屬性來交換url。

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/