![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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;
});
});
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
リストの■を押すと、下の画像がフェードアウト/インで切り替わるという事をしています。
ココまでは出来たのですが……リストの■を連打したり、早く押しまくると
処理落ちして、最終的にブラウザが落ちてしまいます。。。
回避方法はありますでしょうか。
宜しくお願い致します。
No.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. …
<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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
どの<li><a> が押されたか判別...
-
フォームのテキストエリアに検...
-
文字と数字が混在する要素のsor...
-
折りたたみメニューがFirefoxで...
-
「jQuery」アコーディオンメニ...
-
質問に答えていくと、回答によ...
-
アコーディオンメニューの開閉制御
-
JavaScriptで、?マークとコロ...
-
助けてください… jQuery 左右に...
-
JQueryタブのアクティブ アン...
-
jQueryのhide,showで中の要素が...
-
ホームページビルダー15 メニュ...
-
3階層メニューについての質問...
-
jqueryで複数のIDをまとめたい...
-
クリックしたら文章が入れ替わ...
-
jquery ドロップダウンメニュー...
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き
-
textareaに画像を表示したい
-
Javascriptで画像を水面のよう...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
「jQuery」アコーディオンメニ...
-
javascript テキストエリアを1...
-
jquery ドロップダウンメニュー...
-
jQueryでネスト構造の<li>がク...
-
クリックした<a>タグのみにClas...
-
jQueryの配列の渡し方について
-
for(var i=0;...) の i の値を...
-
JavaScriptによる疑似プルダウ...
-
jQueryのeqで最後からn番目以降...
-
javascriptでEnterキーをtabキ...
-
Jquery タブで、4つのliのうち...
-
【javascript で動的に a タグ...
-
どの<li><a> が押されたか判別...
-
マウスオーバーで開閉できるア...
-
同一ページ内で、任意の文字列...
-
jqueryプルダウンメニュー個別着色
-
JavaScript インクリメントの書...
-
複数の画像をランダム(シャッ...
-
タブ切り替えの初期表示について
おすすめ情報