- ベストアンサー
JQueryでクリック時のタグの親子の関係について
LOHAの回答
- LOHA
- ベストアンサー率52% (203/388)
いわゆるバブリングと呼ばれるものです。 イベント発生時にe.stopPropagationで止めることが可能です。 http://jsajax.com/Articles/event5/305 http://semooh.jp/jquery/cont/doc/event/#event.stopPropagation 頻繁に使用する事も無いですが、別に有り得ないシチュエーションだとは思いません。
関連するQ&A
- jQueryのdraggable縦書き出来ますか？
プログラム自体初めてなのですが、仕事の関係で作らないといけない事になりました。 目的は、「文字が書かれた札をドラッグで色々と動かして操作したいです。」 jQueryのdraggableを使用して札のようなものをマウスのドラッグで色々と動かしたいと考え 作ってみましたが、札の中がどうしても横書きになってしまいます。 「札の中を縦書きにする方法を教えて頂けないでしょうか？」 基本的な考え方が間違っているかもしれませんが出来るのであればどうか教えてほしいです。 とりあえずここまでは書いています。 質問が分かりづらく申し訳ありません。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery- 1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <style> #draggable01 { width: 25px; height: 500px; padding: 0.5em; } #draggable02 { width: 25px; height: 350px; padding: 0.5em; } </style> <script> $(function() { $( "#draggable01" ).draggable(); }); </script> <script> $(function() { $( "#draggable02" ).draggable(); }); </script> </head> <body> <div> <div id="draggable01" class="ui-widget-content"> <p>あいうえお</p></div> <div id="draggable02" class="ui-widget-content"> <p>かきくけこ</p></div> </div> </body></html>
- ベストアンサー
- JavaScript
- JQueryで$("dt span")クリック動作
JQueryで$("dt span")をクリックしたときに 隣接するddタグの部分を表示させるには以下の記述を どのように修正すればよいのでしょうか？ <html> <head> <style type="text/css"> dl { margin-bottom: 20px; } dd { display: none; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("dt span").click(function(){ $("+dd",this).slideToggle(); }); }); </script> </head> <body> <dl> <dt>toggle<span>開く</span></dt> <dd>テキストが入ります。</dd> </dl> <dl> <dt>toggle<span>開く</span></dt> <dd>テキストが入ります。</dd> </dl> </body> </html> ご存じの方がおられましたらご回答をよろしくお願いします。
- ベストアンサー
- JavaScript
- （jQuery)どこがエラーなのか分からない
●質問の主旨 下記のコードはどこが間違いでしょうか？ Javascriptコンソールでも特にエラー表示がされません。 ご存知のかたご教示願います ●コードの意図 1．ボタン要素（button）をクリック 2．非表示(none)にされていたdiv要素（赤い正方形）が出現する ●コード （click.html) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptの勉強</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <h1>JavaScriptの勉強</h1> <script> $(function() { $("button").click(function() { $("target").show('slow'); }); }); </script> <p><button id='button'>クリック</button></p> <div id="target" style="display"; none; width: 150px; height:150px; background-color: red;></div> </body> </html>
- ベストアンサー
- JavaScript
- jquery uiが動かない
jquery uiが動きません。 何度も見直し、プログラムを書いてもどこがいけないかわかりません。 教えていただけたら幸いです。お願いいたします <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> </head> <body> <div id="box">box</div> <style> #box{ width:100px; height:100px; background:red; } </style> <script> $(function(){ $("#box").draggable( axis: 'x'; ); }); </script> </body> </html>
- ベストアンサー
- JavaScript
- jQueryについて教えてください
現在ドットインストールでjQueryを勉強しています いきなりつまずいたといいますかエラー？があります 以下のコードなのですが文字色（<p>）が赤色になりません なぜでしょうか？ このコードではjQueryはDLせずに読み込ませています DLしたほうがいいでしょうか？ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <head> <body> <p>jQueryの練習</p> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function () { $('p').css('color', 'red'); }); </script> </body> </html>
- ベストアンサー
- JavaScript
- 環境：WinXP＋IE7＋jquery1.4.2
環境：WinXP＋IE7＋jquery1.4.2 次のようなコードで、メニューをクリックすると、メニューを非表示にしているのですが、画面が一瞬ちらつきます。ちらつきを無くすには、どうすればよいでしょうか？ よろしくお願いします。 【コード】 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="../ajax/jquery.js"></script> <script language="JavaScript"> <!-- $(document).ready( function(){ $("#menu").click(function(){ $(this).hide(300); }) } ); //--> </script> </head> <body> <div id="menu">メニュー</div> <div id="doc">コンテンツ<br/>○○○○○○○○○○○○○○○<br/></div> </body> </html>
- ベストアンサー
- JavaScript
- jqueryを使ったスクロール画面が正しく作動しません。
jqueryを使ったスクロール画面が正しく作動しません。 HTMLに関する質問コーナーにはふさわしくない質問かもしれませんが、jquery.jstocktickerを使ったスクロール画面に関して教えて欲しいことがあります。 以下のようなものを書いてみました。しかし、スクロールされるべき文字（この場合は「テスト」）が右からでてきません。左端に現われてすぐに消えてゆきます（一様左にスクロールされながら消えるのですが）。 どこが間違っているのかをご指摘していただければと思い、投稿させていただきました。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>スクロール</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jstockticker-1.1.js"></script> <link href="jQuery/innerFade/css/reset.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/fonts.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/jq_fade.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() {$("#ticker").jStockTicker({interval: 5});}); </script> <style type="text/css"> div#tickercontainer{width: 680px;margin-left:auto;margin-right:auto;position:relative} div#wrap{position:relative;padding:5px; overflow: hidden} div#ticker{position:relative} div#ticker span{padding-right:20px} </style> </head> <body> <div id="tickercontainer"> <div id="wrap"> <div id="ticker"> <span> テスト</span> </div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- ｊQueryでの画像のフェードインのループ
ｊQuery初心者です。 jQueryで３枚の背景画像がフェードインで切り替わり、ループするようにしたいのですが、 下記のように書いてみたのですが、１週ループまでは上手くいくのですが、２週目に２枚目の画像で止まってしまいます。 下記だと何故２週目の２枚目で止まるのか？の原因と、スマートな書き方をご教授頂けませんか？ <head> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <script> $(function() { $("div.fadein_1").fadeIn(1000); setInterval(function(){ $("div.fadein_2").delay(4000).fadeIn(1000, function(){ $("div.fadein_3").delay(4000).fadeIn(1000, function(){ $("div.fadein_2").attr('style', 'display:none;'); $("div.fadein_3").fadeOut(1000, function(){ clearQueue(); }); }); }); }, 0); }); </script> <div class="fade"> <div class="fadein_1" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_2" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_3" style="display:none;"></div> </div>
- ベストアンサー
- JavaScript
- jqueryでtoggleを無制限に繰り返したい
下記のhtmlテキストのjquery記載部分について質問させていただきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>toggle繰り返し</title> </head> <body> <p>toggle繰り返し</p> <div id="box" style="width:150px;height:150px;background:blue;"> </div> <script src="http://code.jquery.com/jquery-1.10.1.min.js"> </script> <script> $(function() { $('#box').toggle(1000); $('#box').toggle(1000); $('#box').toggle(1000); $('#box').toggle(1000); $('#box').fadeOut(1000, function() { }); }); </script> </body> </html> 上記のhtmlの上から14行目～17行目に記載してあるにあるscript部分に、 $('#box').toggle(1000); を4回記載しているため、 4回、繰り返しフェードアウトが実行されています。 DreamWeaverCS6で作成し、ブラウザIE10、firefox24.0で動作確認しています。 ここで質問ですが、この回数を無制限に、つまり永久に繰り返すようにするには、どのようにすればよいのでしょうか？具体的なコードを記載していただけると助かります。 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- jQuery UIのdraggableについて
こちらでは初めて質問させていただきます。 よろしくお願いします。 現在、jQuery UI の draggable を使用してWebブラウザ上での ドラッグ＆ドロップを実装中なのですが、 期待通りに動作させることが出来ません。 <script></script> …… (1) <html> <head> <script type="text/javascript" src="jQuery/jquery-1.3.2.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.core.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.draggable.js"></script> <style> #a { height:100px; width:300px; overflow:scroll; border:solid 1px Black; } #b { width:60px; height:40px; background:lime; position:absolute; top:10px; left:50px } #c { width:60px; height:40px; background:lime; position:absolute; top:60px; left:50px } </style> <script type="text/javascript"> $j = jQuery.noConflict(); $j(function($) { $('#b').draggable(); }); $j(function($) { $('#c').draggable(); }); </script> </head> <body> <div id="a"> <span id="b">Drag Element1</span> <span id="c">Drag Element2</span> </div> </body> </html> ドラッグ対象は複数存在するため、ドラッグ対象を<div>エリア内で スクロール（必須です）させています。 ドラッグ対象を<div>エリア外にドラッグしたいのですが、 <div>エリア内しかドラッグできません。 ((1)の記述がないと、ドラッグ対象が<div>エリア内でスクロール しませんでした。？？？) どなたか、よきアドバイスをお願いします。
- 締切済み
- JavaScript