jQueryの重複クリック回避について教えてください。

解決済

質問者：lalalanlanlala
質問日時：2010/06/28 21:21
回答数：1件

jQueryの重複クリック回避について教えてください。

はじめまして。
最近jQueryを勉強し始めましたが、難しく、なかなかうまくいきません。
クリックを何度もしたときの処理がうまくいかず、困っております。
ご教授願いますm(_ _)m

---------------HTML-----------------
<body>
<div>
<ul>
<li><a href="image/a.jpg">■</a></li>
<li><a href="image/b.jpg">■</a></li>
<li><a href="image/c.jpg">■</a></li>
<li><a href="image/d.jpg">■</a></li>
<li><a href="image/e.jpg">■</a></li>
<li><a href="image/f.jpg">■</a></li>
</ul>
</div>
<div><img src="image/black_short.jpg" width="640" height="423" /></div>
</body>

---------------JSファイル-----------------
$(function(){
$("a").click(function(){
$("img:not(:animated)").before("<img src='"+$(this).attr("href")+"' alt=''>");
$("img:last:not(:animated)").fadeOut("slow",function(){
$(this).remove();
});
return false;
});
});

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

リストの■を押すと、下の画像がフェードアウト／インで切り替わるという事をしています。
ココまでは出来たのですが……リストの■を連打したり、早く押しまくると
処理落ちして、最終的にブラウザが落ちてしまいます。。。
回避方法はありますでしょうか。
宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2010/06/29 11:02

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. …
<script type="text/javascript">

</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>