3

到目前为止，这将是我的第一个问题，因为我总是在使用论坛之前进行研究，但我没有得到这个工作。

我有一个用作切换动画按钮的图像（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>

和我的 HTML：

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

- Here my hidden content -

</div>

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

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

4

4 回答 4

3

检查.attr. 它应该是这样的

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

函数参考：http ://api.jquery.com/attr/

于 2013-09-08T01:27:19.080 回答
3

要更改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">

CSS

.display-none {
    display:none;
}

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');
       }
    });
  });
于 2013-09-08T01:36:37.200 回答
1

取一个分区，例如#play-pause-button 和其他分区，即#play-pause。现在把你的图片放在内部门的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");
            }
        });
于 2014-01-17T06:46:09.417 回答
0

您应该使用 css 来关联“按钮”上的图像和 css 类以确定要显示的内容。

然后，您可以使用 Jquery 的 ToggleClass() 添加/删除类。您可以使用相同的类来显示/隐藏您的隐藏内容。

标记

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

css

#idd.off {
    display:none;
}
#btn {
    border:1px solid #666;
    width:100px; height:100px;
    background:#fff url(images/button.png) no-repeat 0 0;  // Show Less.. button
}
#btn.off {
    background:#fff url(images/button2.png) no-repeat 0 0; //Learn More.. button
}

jQuery

$('#btn').click(function(){
    $('#idd').toggleClass('off');
    $('#btn').toggleClass('off');
});
于 2013-09-08T02:04:42.247 回答