Question

我有这段代码：

//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/

我点击一个输入收音机并通过再次点击更改图像src ...如何更改图像的样式？

2 个答案: