- ベストアンサー
jQueryの重複クリック回避方法とは？
- jQueryを使った重複クリック回避方法を教えてください。クリック回数による処理落ちを防ぐ方法が知りたいです。
- 最近jQueryを勉強し始めましたが、重複クリックの処理がうまくいきません。連打や早い操作で処理が落ちてしまいます。回避方法を教えてください。
- jQueryの重複クリック回避について教えてください。クリックによる処理落ちを防ぐ方法が知りたいです。
- lalalanlanlala
- お礼率100% (5/5)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
jqueryはよく知りませんが… not(:animated)で限定しているのと、すでに複数の要素が存在しているときにご提示のコードで画像を挿入するとさらに増えてしまう。 追加するものは1つに限定し、1つを確実に削除するというふうにすればよいでしょう。 以下、サンプルまで。 （手抜きなので、同じところをクリックすると、同じ画像をフェードインさせますが…） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div#screen { position:relative; } div#screen img { position:absolute; width:640px; height:423px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#navi a").click(function() { $("#screen img:first").before("<img src='"+$(this).attr("href")+"' alt=''>"). stop().fadeOut("slow",function() { $(this).remove(); }); $("#screen img:first").hide().fadeIn("slow"); return false; }); }); //--> </script> </head> <body> <div> <ul id="navi"> <li><a href="A.jpg">■A</a></li> <li><a href="B.jpg">■B</a></li> <li><a href="C.jpg">■C</a></li> <li><a href="D.jpg">■D</a></li> <li><a href="E.jpg">■E</a></li> <li><a href="F.jpg">■F</a></li> </ul> </div> <div id="screen"><img src="black_short.jpg" alt=""></div> </body> </html>
お礼
ありがとうございます。 とても参考になりました。