视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
如何对div的点击事件进行定位
2020-11-27 19:30:20 责编:小采
文档


这篇文章主要讲了div点击事件的定位,有需要的小伙伴可以参考一下,希望可以帮助到你。

背景:多个div ,拥有共同点className,点击都触发相同的事件。
功能:触发点击事件的div的背景色变为红色,其他的div背景色为绿色。
实现思路:用$(this)关键字获取触发点击的div,先将所有的出当前div的背景色设置为绿色,再将当前的div背景色设置为红色。
关于$(this):与this的最大区别就在于其是jquery对象,与this相同的都是表示当前对象。

<!DOCTYPE html><html>
 <head>
 <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
 <meta charset="UTF-8">
 <link rel="stylesheet" href="../css/airTicket.css"> 
 <script src="../js/jquery.min.js" ></script>
 <style>
 .div1{ 
 background-color:#4CD9; 
 height:20px; 
 margin-top:10px; 
 }
 </style>
 </head>
 <body>
 <div class="div1" id="a1">div_1</div>
 <div class="div1" id="a2">div_2</div>
 <div class="div1" id="a3">div_3</div>
 <div class="div1" id="a4">div_4</div>
 <div class="div1" id="a5">div_5</div>
 <script>
 $(function(){
 $(".div1").click(function(){
 var id = $(this)[0].id;
 conlose.log(id);
 $('div').css("background-color","green");
 $(this).css("background-color","red");
 })
 }) </script>
 </body>
</html>

下载本文
显示全文
专题