在做移動端項目時，需要做一個滑動刪除的功能，想到用jq的移動端插件 jquery.touchSwipe.min.js
自己做的demo完全沒問題，可是放到項目中就報錯
一開始以為是onload沖突，檢查所有js后，並沒有發現問題。
最后才發現是$沖突。
效果如下
具體demo代碼如下
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> 6 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 7 <script type="text/javascript" src="http://www.163css.com/myweb/hihilinxuan/template/hihilinxuan/cssjs/2012/12/ifengtouch/js/jquery.touchSwipe.min.js"></script> 8 <title>左滑動刪除</title> 9 <style> 10 ul,li{padding:0;margin:0;} 11 ul{ 12 position: relative; 13 14 } 15 li{ 16 position: relative; 17 width: 100%; 18 text-align: left; 19 height:60px; 20 border-bottom: 1px solid #f00; 21 } 22 li>p{ 23 width: 100%; 24 text-align: left; 25 background-color: #68ff31; 26 height:60px; 27 position: absolute; 28 z-index: 99; 29 margin:0; 30 top:0; 31 /*display: none;*/ 32 33 } 34 li>.button{ 35 right:0; 36 width:100px; 37 height:60px; 38 background-color: #f00; 39 color:#fff; 40 text-align: center; 41 position: absolute; 42 z-index: 98; 43 margin:0; 44 border:none; 45 outline: none; 46 } 47 </style> 48 </head> 49 <body> 50 <ul class="list"> 51 <li> 52 <p>首頁</p> 53 <button type="button" class="button">刪除</button> 54 </li> 55 <li> 56 <p>首頁</p> 57 <button type="button" class="button">刪除</button> 58 </li> 59 <li> 60 <p>首頁</p> 61 <button type="button" class="button">刪除</button> 62 </li> 63 </ul> 64 <!--滑動顯示刪除按鈕--> 65 <script> 66 function toLeft(elem,is) { 67 if(is%2){ 68 elem.animate({ 69 marginLeft: -100//left 70 }, "slow"); 71 }else{ 72 elem.animate({ 73 marginLeft: 0//right 74 }, "normal"); 75 } 76 } 77 $(function(){ 78 var p=$('.list>li>p'); 79 p.swipe({ 80 swipeStatus:function(event, phase, direction) { 81 if(direction=="left"){ 82 toLeft($(this),1); 83 return false; 84 } 85 else if(direction=="right"){ 86 toLeft($(this),0); 87 return false; 88 } 89 } 90 }) 91 }); 92 </script> 93 </body> 94 </html>