如果用户点击打开/关闭，如何更改图像？

Question

我有以下代码：

$(document).ready(function() {
  $('.anchor_clicker').click(function(){
    if( $('.anchor_clicker').data('stored-height') == '930' ) {
      $('.anchor_clicker').data('stored-height','100');
      $('#desc').animate({height:'100'})
    } else {
      $('.anchor_clicker').data('stored-height','930');
      $('#desc').animate({height:'930'})
    }
  })
});

<a href="#" class="anchor_clicker">Click</a>

现在我有文字“点击”这样做，但我想要点击默认图片图标，上面的代码会扩展div，再次点击它会缩短它。如何使用两个不同的图像而不是“CLick”？

Answer 1

用你的箭头创建一个精灵，添加一个类到你的CSS，这将改变jQuery点击的背景位置。
而不仅仅是toggleClass('opened')

的 LIVE DEMO

$(document).ready(function() {

  $('.anchor_clicker').on('click', function(e){
    e.preventDefault();    
    var $btn = $(this);      
    $btn.toggleClass('opened');

    var heights = $btn.hasClass('opened') ? 930 : 100 ;
    $('#desc').stop().animate({height: heights });
  }); 

});

CSS：

a.anchor_clicker{
  padding-right: 16px
  background:url(http://i.imgur.com/u3GpDiC.png?1?1426) no-repeat right 0;
}
a.anchor_clicker.opened{
  background-position: right -16px;
}

拥有 sprite 而不是2个单独图像的好处是删除了对点击时新图像的额外请求，以及该请求在显示加载时创建的时间间隔新形象。

Answer 2

很简单，这样做：

(FIDDLE)

<强> CSS

.anchor_clicker
{
  background-image:url(/path/to/sprite);
}

<强>的jQuery

$(document).ready(function() {
  $('.anchor_clicker').click(function(){
    if( $('.anchor_clicker').data('stored-height') == '930' ) {
      $('.anchor_clicker').data('stored-height','100');
      $('#desc').animate({height:'100'})
      $(this).css('background-position','-50px 0px');
    } else {
      $('.anchor_clicker').data('stored-height','930');
      $('#desc').animate({height:'930'});
      $(this).css('background-position','0px 0px');
    }
  })
});

对于两个图像而不是精灵：

<强> CSS

.anchor_clicker
{
  background-image:url(/path/to/image1);
}

.anchor_clicker.b
{
  background-image:url(/path/to/image2) !important;
}

<强>的jQuery

$(document).ready(function() {
  $('.anchor_clicker').click(function(){
    if( $('.anchor_clicker').data('stored-height') == '930' ) {
      $('.anchor_clicker').data('stored-height','100');
      $('#desc').animate({height:'100'})
      $(this).addClass('b');
    } else {
      $('.anchor_clicker').data('stored-height','930');
      $('#desc').animate({height:'930'});
      $(this).removeClass('b');
    }
  })
});

Answer 3

$('.anchor_clicker').click(function(){
   $(this).find('img').prop('src', function(src) {
        return src === 'img1' ? 'img2' : 'img1'
   })
})

您可以根据src动态更改图像的src属性。这是如果您想要交换2个不同的图像。

但是如果你有一个带有不同图像的精灵，那么操纵类就可以了。