Question

我需要实现onClick更改背景图片：有多个元素与类

具有相同的名称

＆＃13;

.click{
    background-image: url("http://icons.iconarchive.com/icons/graphicloads/100-flat/256/phone-icon.png");
    }

＆＃13;

<a class='click' onclick="$(this).css('background-image','http://previews.123rf.com/images/runlenarun/runlenarun1411/runlenarun141100068/33499512-Single-flat-icon-with-long-shadow-for-web-applications-email-icons-design-Envelope-with-close-sign-V-Stock-Vector.jpg');"></a>
<a class='click' onclick="$(this).css('background-image','http://previews.123rf.com/images/runlenarun/runlenarun1411/runlenarun141100068/33499512-Single-flat-icon-with-long-shadow-for-web-applications-email-icons-design-Envelope-with-close-sign-V-Stock-Vector.jpg');"></a>
<a class='click' onclick="$(this).css('background-image','http://previews.123rf.com/images/runlenarun/runlenarun1411/runlenarun141100068/33499512-Single-flat-icon-with-long-shadow-for-web-applications-email-icons-design-Envelope-with-close-sign-V-Stock-Vector.jpg');"></a>

＆＃13;

当我点击任何<a>标签时，图片会更改为onClick上的任何其他图片。元素id无法使用。只上课。请帮忙

Fiddle

Answer 1

$(document).ready(function(){
  $('.click').click(function(){
    var img= $(this).data('img');
    $(this).css('background-image','url("'+img+'")');
  });
});

.click{
    background-image: url("http://icons.iconarchive.com/icons/graphicloads/100-flat/256/phone-icon.png");
  height:100px;
  width:200px;
  display:inline-block;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='click' data-img="http://previews.123rf.com/images/runlenarun/runlenarun1411/runlenarun141100068/33499512-Single-flat-icon-with-long-shadow-for-web-applications-email-icons-design-Envelope-with-close-sign-V-Stock-Vector.jpg"></a>
<a class='click' data-img='http://previews.123rf.com/images/runlenarun/runlenarun1411/runlenarun141100068/33499512-Single-flat-icon-with-long-shadow-for-web-applications-email-icons-design-Envelope-with-close-sign-V-Stock-Vector.jpg'></a>
<a class='click' data-img='http://previews.123rf.com/images/runlenarun/runlenarun1411/runlenarun141100068/33499512-Single-flat-icon-with-long-shadow-for-web-applications-email-icons-design-Envelope-with-close-sign-V-Stock-Vector.jpg'></a>

检查一下。我为你创造了一个例子。：）

Answer 2

您可以使用:active（或:focus）状态更改background-image，仅使用CSS即可实现此目的。诀窍是在transition元素上设置background，在正常状态下给它一个非常高的延迟，并在更改图像时将其重置为0s，如下所示：

＆＃13;

a{
  background-image:url(http://icons.iconarchive.com/icons/graphicloads/100-flat/256/phone-icon.png);
  background-size:contain;
  display:inline-block;
  height:100px;
  transition-delay:9999s;
  transition-property:background-image;
  width:100px;
}
a:active,a:focus{
  background-image:url(http://previews.123rf.com/images/runlenarun/runlenarun1411/runlenarun141100068/33499512-Single-flat-icon-with-long-shadow-for-web-applications-email-icons-design-Envelope-with-close-sign-V-Stock-Vector.jpg);
  transition-delay:0s;
}

＆＃13;

<a href="#"></a>
<a href="#"></a>
<a href="#"></a>

＆＃13;

如何在onClick上更改背景图片

2 个答案: