我需要实现 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)。请帮忙
最佳答案
$(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>
检查这个。我为你创建了一个例子。 :)
关于javascript - 如何更改背景图片onClick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38656167/