cari

Rumah >hujung hadapan web >tutorial js >如何对div的点击事件进行定位

如何对div的点击事件进行定位

yulia
yuliaasal
2018-09-19 15:32:462260semak imbas

这篇文章主要讲了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:#4CD964;               
             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);
                   $(&#39;div&#39;).css("background-color","green");
                   $(this).css("background-color","red");
               })
           })        </script>
   </body>
</html>

Atas ialah kandungan terperinci 如何对div的点击事件进行定位. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何使用封装实现楼层点亮效果（代码实例）Artikel seterusnya：ES6实现一个“辨色”小游戏的方法

Artikel berkaitan

Lihat lagi