首頁 > web前端 > js教程 > 如何對div的點擊事件進行定位

如何對div的點擊事件進行定位

yulia
發布: 2018-09-19 15:32:46
原創
2262 人瀏覽過

這篇文章主要講了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>
登入後複製

以上是如何對div的點擊事件進行定位的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板