javascript - 单击时切换锚标记背景

Question

在 div 中，我有一个锚标记。该锚标记具有使用 CSS 分配给它的背景图像。

当用户单击它时，会执行一些 JavaScript，但我想将背景图像更改为另一个，然后当他们再次单击它时，背景图像会变回原来的样子。

任何有关如何执行此操作的帮助（JQuery、CSS；我不确定）将不胜感激。

提前致谢。

Answer 1

您可以使用 toggleClass 来更改背景图像。

$('#div1').click(function(){
    $(this).toggleClass('class2');
});
​

现场演示

Answer 2

将锚的属性——在状态改变之前——保存到一个变量中。然后将该变量添加到data对象中。从这里，我们可以向链接添加一个类来测试我们需要服务的场景。出于本示例的目的，我使用了颜色和background-color属性，您可以很容易地更改它以满足您的需求。

这是我的示例的工作 jsFiddle

这是 HTML 结构 ->

<div>
  <a href="#" style="background-color:blue;">
    Click To Change
  </a>
</div>

这是 jQuery ->

$('a').click(function(){
  if($(this).hasClass('clicked')){
    $(this).css('background-color', $(this).data('oldbg'));
    $(this).removeClass('clicked');
  }else{
    $(this).addClass('clicked');  

    var oldBG = $(this).css('background-color');
    //the above stores the original css properties to a variable 'oldBG'

    $(this).data('oldbg', oldBG);
    //set the data of this object to the properties of the initial background.
    $(this).css('background-color', 'red');  
  }
});