网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > jQuery

想知道点击的是第几张图片,对应图片的alt内容是什么?

2021/10/10 12:11:29

想知道点击的是第几张图片,对应图片的alt内容,其实很简单,这里用到了jQuery的this和attr属性,下面我们来看看具体如何实现。<!DOCTYPE html><html><head><meta charset="utf-8"><title>想知道点击的是第几张图片,对应图片的a…

        想知道点击的是第几张图片,对应图片的alt内容,其实很简单,这里用到了jQuerythis和attr属性,下面我们来看看具体如何实现。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>想知道点击的是第几张图片,对应图片的alt内容是什么?www.woaidaogu.com</title>
<style>
img {
    width: 150px;
height:150px;
padding: 30px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("img").click(function(){
$("h3").html("这是第"+($("img").index(this)+1)+"张图片;  Alt内容:"+$(this).attr("alt"));
});
});
</script>
</head>
<body>
<img src="images/1.png"  alt="郁金香" />
<img src="images/2.png"  alt="百合花" />
<img src="images/3.png"  alt="菊花" />
<img src="images/4.png"  alt="玫瑰花" />
<img src="images/5.png"  alt="月季花" />
<img src="images/6.png"  alt="蓝莲花" />
<h3></h3>
</body>
</html>

image.png

        查看在线实例

        通过以上内容我们知道了jQuery获取图片alt内容的方法,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

    暂无相关的数据...