javascript - 如何更改背景图片onClick

Question

我需要实现 onClick更改背景图片:存在多个与类同名的元素

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

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

当我点击任何 <a>标记，图像更改为任何其他图像 onClick。元素 id不能用。只有类(Class)。请帮忙

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>

检查这个。我为你创建了一个例子。 :)