之前在寫JavaScript的時候，不知為何很奇耙地搞出一個怪異的選取目標，並偶然發現它會因點擊目標父層的層數而觸發相對應的次數。 $(document).on('click',':not(#nav *)',function(e){ console.log('trigger'); }); 為了把這問題解決用很多種方法嘗試，結果只要多一行就解決了… $(document).on('click',':not(#nav *)',function(e){ if (e.target !== this) return; console.log('trigger'); }); click 和 touchend 一起用 另外一個寫不好的情況是 click 和 touch 事件一起用，造成兩個事件一起觸發。 $(document).on('click touchend','.toggle-button',function(e){ e.preventDefault(); $('#element').toggleClass('--active'); }); 解決的方法是增加一個 flag： var triggerFlag = false; var triggerThreshold = 200; $(document).on('click touchend','.toggle-button',function(e){ e.preventDefault(); if (!triggerFlag) { triggerFlag = true; setTimeout(()=>{ triggerFlag = false; }, triggerThreshold); $('#element').toggleClass('--active'); } }); 類似的頻繁觸發 另外在 scroll 和 resize 時，常常會因為頻繁觸發而導致效能爆...

常常遇到上司想在網頁上方便觀看一些搜集而來的數據，之後又說想要把網頁上的表格匯出成 csv 檔案，方便他們用 excel 計算一些東西。這時候該怎麼辦才好？ 以下為使用 jQuery 的解決方案 function exportTableToCSV($table, filename) { var $rows = $table.find('tr:has(td)'), // Temporary delimiter characters unlikely to be typed by keyboard // This is to avoid accidentally splitting the actual contents tmpColDelim = String.fromCharCode(11), // vertical tab character tmpRowDelim = String.fromCharCode(0), // null character // actual delimiter characters for CSV format colDelim = '","', rowDelim = '"\r\n"', // Grab text from table into CSV formatted string csv = '"' + $rows.map(function(i, row) { var $row = $(row), $cols = $row.find('td'); return $cols.map(function(j, col) { var $col = $(col), text = $col.text(); if(/^(0)([0-9]){9}/.test(text)){ return '=""'+text...

HTML如下： <section class= "box" >      <div class= "boALL" > </div> <!-- all borders --> <div class= "boTop" ></div> <!-- 上 --> <div class= "boRight" ></div> <!-- 右 --> <div class= "boBottom" ></div> <!-- 下 --> <div class= "boLeft" ></div> <!-- 左 -->      <a href= "javascript: void(0)" class= "txt" > HOVER HERE </a> </section> css setting： .box {    display: inline-block ;    width: 200px ;    height: 60px ; background-color: #999 ;    position: absolute ;    left: 0 ;    right: 0 ;    top: 0 ;    bottom: 0 ;    margin: auto ; text-align: center ; line-height: 60px ;    transition: background-color .7s ; } .box:hover { background-color: #...

HTML架構如下(html structure)： <div class=" clock ">     <div class=" centerDot "></div>     <div class=" secHand "></div>     <div class=" minuHand "></div>     <div class=" hourHand "></div>     <div class=" number1 number ">1</div>     <div class=" number2 number ">2</div>     <div class=" number3 number ">3</div>     <div class=" number4 number ">4</div>     <div class=" number5 number ">5</div>     <div class=" number6 number ">6</div>     <div class=" number7 number ">7</div>     <div class=" number8 number ">8</div>     <div class=" number9 number ">9</div>     <div class=" number10 number ">10</div>     <div class=" number11 number "...

fade slide show 從Jonathan Snook 的網站得知可以用appendTo()去控制，幫我省去了一些多餘的css()定位和addClass / removeClass 。 但其實原本的寫法會讓appendTo和fadeOut同時執行，導致看不到fadeOut的效果，所以再改寫成讓appendTo塞進fadeOut裡面，讓fadeOut之後再appendTo。 html架構如下： 每個 li 各自都有不同的background-image jQuery語法如下： element的變化如下：