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

的index.php

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

Answer 1

更改此行

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

到

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

你基本上是在比较锚内的html（链接）而不是文本。文本是您在呈现html后最终看到的内容。

Answer 2

您可以检查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>

用图像jquery切换

2 个答案: