javascript - 如果用户单击打开/关闭，我如何更改图像？

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，再次单击时会缩短它。如何使用两个不同的图像而不是“单击”？

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;
}

使用精灵而不是 2 个单独的图像的好处是在单击时删除了对新图像的附加请求，以及该请求在显示加载的新图像时创建的时间间隔。

Answer 2

很简单，这样做：

（小提琴）

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 个不同的图像。

但是如果你有一个带有不同图像的精灵，那么操纵类是要走的路。