javascript - 使用图像 jquery 切换

Question

当单击 add_hide_calculator 时，我希望图像变为 calculator_open-img，再次单击时，我希望图像变回原样。这是我目前所拥有的，我无法在点击时更改图片:

Jquery.js

$('#add_hide_calculator').on("click", function() {
    var text = $(this).val();
    $("#calculator").toggle();
});

$(window).on("click keydown", function(e) {
  //e.preventDefault()
  //sets the esc key button 
  if (e.keyCode === 27 || !$(e.target).is(function() {return $("#calculator, #add_hide_calculator")})) {
    $("#calculator").hide()
  }
}).focus()

/* toggling image starts here */

$('#add_hide_calculator').on("click", function() {
    var text = $(this).text();

    if (text == "<img src='calculator_open-img.png' width='200px' height='190px'>") {
      $(this).html("<img src='calculator_close-img.png' width='200px' height='190px'>");
    } else {
      $(this).html("<img src='calculator_open-img.png' width='200px' height='190px'>");
    }
});

索引.php

<a id="add_hide_calculator"><img src="calculator_close-img.png" width="200px" height="190px"></a>

Answer 1

您可以检查 src 属性值

$('#add_hide_calculator').on("click", function() {

  $(this).find('img').attr('src', function(i, src) {
    return src == "calculator_open-img.png" ? "calculator_close-img.png" : "calculator_open-img.png";
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a id="add_hide_calculator">
  <img src="calculator_close-img.png" width="200px" height="190px">
</a>