我点击输入单选并更改图像src，通过再次点击…我如何将图像更改回原来的样子

I click an input radio and change an image src, by clicking again...how do I change the image back how it was?

本文关键字：图像 原来 单选 输入 src      更新时间：2023-09-26

我有这样的代码:

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。

谢谢!

我删除了onclick处理程序，并添加了一个data属性来替换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);
});

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

相关文章：