切换图像jQuery

Question

when clicked on add_hide_calculator I would like the image to change in to calculator_open-img , and when clicked again, I would like the image to change back. This is what I have so far I am unable to change the picture on click:

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'>");
    }
});

Index.php

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

Answer 1

change this line

var text = $(this).text();

to

var text = $(this).html();

you basically are comparing the html inside the anchor (link) not the text. Text is what you finally see after html is rendered.

Answer 2

You can check for the src attribute value

 $('#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>