Javascript 使用jquery单击一个图像后将其更改为另一个图像

这将是我到目前为止的第一个问题，因为我总是在使用论坛之前做一个调查，但我不能让它起作用

我有一个图像，用作切换动画（button.png）的按钮，我希望在为另一个图像（button2.png）单击该图像后更改该图像，一旦您单击第二个图像，它将再次更改为第一个图像，我有：

<script type="text/javascript">
$(document).ready(function() {

  // when click on the tag with id="btn"
  $('#btn').click(function() {
      // change the state of the "#idd"
    $('#idd').toggle(800, function() {
      // change the button text according to the state of the "#idd" 
      if ($('#idd').is(':visible')) {
        $('#btn').attr('images/button2.png', this.href); // Show Less.. button
              } else {
        $('#btn').attr('images/button.png', this.href); //Learn More.. button

      }
    });
  });
});
</script>

$（文档）.ready（函数（）{
//单击id为“btn”的标记时
$（'#btn'）。单击（函数（）{
//更改“#idd”的状态
$（'#idd'）。切换（800，函数（）{
//根据“#idd”的状态更改按钮文本
如果（$（'#idd'）。是（':visible'））{
$（'#btn'）.attr（'images/button2.png'，this.href）；//显示更少..按钮
}否则{
$（'#btn'）.attr（'images/button.png'，this.href）；//了解更多..按钮
}
});
});
});

和我的Html：

<div id="idd" style="display:none;">

- Here my hidden content -

</div>

<!-- Button -->
<img src="images/button.png" style="cursor: pointer;" id="btn">

-这里是我隐藏的内容-

---

我做错了什么？请帮助：（

检查

.attr

的语法。它应该是

$('#btn').attr('src', 'your image src'); 

---

函数参考：

要更改

src

的值，请使用

'attr'

如下所示：

$('#btn').attr('src', 'images/button2.png');

这是一个

HTML

<div id="idd" class='display-none'>

- Here my hidden content -

</div>

<!-- Button -->
<img src="http://placekitten.com/40/40" id="btn">

jQuery

var btn = $('#btn');
var idd = $('#idd');

btn.click(function() {  
   idd.toggle(800, function() {
      // change the button text according to the state of the "#idd" 
      if (idd.hasClass('display-none')) {
        btn.attr('src', 'http://placekitten.com/50/50'); 
          idd.removeClass('display-none');
              } else {
        btn.attr('src', 'http://placekitten.com/40/40');
          idd.addClass('display-none');
       }
    });
  });

---

您应该使用css将“按钮”上的图像与css类关联起来，以确定要显示的图像

然后，您可以使用Jquery的ToggleClass（）添加/删除该类。您可以使用同一个类显示/隐藏隐藏的内容

加价

<div id="idd">
   - Here my hidden content -
</div>
<div id="btn">Click Me</div>

jquery

$('#btn').click(function(){
    $('#idd').toggleClass('off');
    $('#btn').toggleClass('off');
});

取一个分区，例如播放暂停按钮，另一个分区，即播放暂停。现在将您的图像放入内部分区的src中，单击外部分区，内部分区的源将更改。。 这是我正在研究的一个类似的例子。希望能对你有所帮助

$('#play-pause-button').click(function () {
            // $('#play-pause-button').play();
            if ($("#media-video").get(0).paused) {
                $("#media-video").get(0).play();
                $("#play-pause").attr('src', "Image1 path");
            }
            else {
                $("#media-video").get(0).pause();
                $("#play-pause").attr('src', "Image2 path");
            }
        });

---

将这两个图像设置为类的背景图像，并改用

.toggleClass（）

。老实说，您做了一些错误的事情。有关示例和对代码的完整工作编辑，请参见下面的答案：）这对我有效，只需更改代码的两行！非常感谢！！：）

$('#btn').click(function(){
    $('#idd').toggleClass('off');
    $('#btn').toggleClass('off');
});

$('#play-pause-button').click(function () {
            // $('#play-pause-button').play();
            if ($("#media-video").get(0).paused) {
                $("#media-video").get(0).play();
                $("#play-pause").attr('src', "Image1 path");
            }
            else {
                $("#media-video").get(0).pause();
                $("#play-pause").attr('src', "Image2 path");
            }
        });