- ベストアンサー
jQueryクリックデータの渡し方とは？
- jQueryのクリックデータの渡し方について説明します。
- 特定のHTML要素をクリックすると、新しいサブウィンドウが生成されて表示される仕組みを実装しています。
- 上記のスクリプトは、クリックされた画像のデータを取得し、表示する役割を持っています。
- eeiina
- お礼率50% (27/54)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 遅くなりました。 新しいウィンドウを生成している部分を抜き出して回答します。 function openThumbnail ( options, $obj, $selectImage ) { var postfix = '_on'; var ulLeft = options.wid + 10; var winOptions = 'status=yes,width=' + options.winW + ',height=' + options.winH + ',scrollbars=' + (options.winS ? 'yes' : 'no'); if ( win !== undefined && !win.closed ) { win.close(); } win = window.open ( '', 'subwinthumbnail', winOptions ); var selSrc = $selectImage.attr('src'); var iniSrc = selSrc.substr(0, selSrc.lastIndexOf('.')); iniSrc += postfix; iniSrc += selSrc.substring(selSrc.lastIndexOf('.')); with ( win.document ) { open(); writeln ( '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' ); writeln ( '<html xmlns="http://www.w3.org/1999/xhtml">' ); writeln ( '<head>' ); writeln ( '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />' ); writeln ( '<meta http-equiv="Content-Script-Type" content="text/javascript" />' ); writeln ( '<meta http-equiv="Content-Style-Type" content="text/css" />' ); writeln ( '<title>' + options.title + '</title>' ); writeln ( '<link rel="stylesheet" href="./subwinthumbnail.css" type="text/css" />' ); writeln ( '<script type="text/javascript">' ); writeln ( 'function changeImage(src,title,srcon) {' ); writeln ( 'document.getElementById("selimg").src = src;' ); writeln ( 'document.getElementById("seltitle").innerHTML = title;' ); writeln ( 'document.getElementById("srcon").src = srcon;') writeln ( '}' ); writeln ( '</script>' ); writeln ( '<style type="text/css">' ); writeln ( 'body#subwin #thumbnail ul { position:absolute;top:0px;left:' + ulLeft + 'px; }' ); writeln ( 'body#subwin #thumbnail p#seltitle { width:' + options.wid + 'px; }' ); writeln ( '</style>' ); writeln ( '</head>' ); writeln ( '<body id="subwin">' ); writeln ( '<div id="thumbnail">' ); writeln ( '<div class="main">' ); writeln ( '<img src="' + $selectImage.attr('src') + '" id="selimg">' ); writeln ( '<p id="seltitle">' + $selectImage.attr('title') + '</p>' ); writeln ( '<img src="' + iniSrc + '" id="srcon" />' ); writeln ( '</div>' ); writeln ( '<ul>' ); $obj.each ( function(index) { var src = $(this).attr('src'); var title = $(this).attr('title'); var srcon = src.substr(0, src.lastIndexOf('.')); srcon += postfix; srcon += src.substring(src.lastIndexOf('.')); var clickStr = "changeImage('" + src + "','" + title + "','" + srcon + "');"; writeln ( '<li>' ); writeln ( '<img src="' + src + '" width="' + options.twid + '" onclick="' + clickStr + '">' ); writeln ( '</li>' ); }); writeln ( '</ul>' ); writeln ( '</div>' ); writeln ( '</body>' ); writeln ( '</html>' ); close(); } } やりたいことはこういうことでしょうか。 違っていたら補足ください。
補足
まさにこの通りです、的確なご回答ありがとうございます。 補足ですが、すべての画像に_onが用意されているわけではないので、無い場合ブラウザで×表示されてしまいます。 そこで、_on画像がある場合のみ処理を行う、または_on画像がない場合はその領域を非表示にするといったことは可能でしょうか。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 なんか見覚えがあるソースです。 このソースはjQueryのプラグインとして作っています。 elemには.html側で指定した要素が入ってきます。 optionsには.html側で指定したオプションが入ってきます。 $('#thumbnail').subwinthumbnail ({ title:'サムネイル別ウィンドウ', // サブウィンドウのタイトル(デフォルト:'') wid:480, // メイン画像の横サイズ(デフォルト:480) hei:360, // メイン画像の縦サイズ(デフォルト:360) winW:710, // サブウィンドウの横サイズ(デフォルト:800) winH:700, // サブウィンドウの縦サイズ(デフォルト:600) winS:false, // スクロールバーの表示(デフォルト:false trueで表示,falseで非表示) twid:200 // サムネイル画像の横サイズ(デフォルト:120) }); この部分がoptionsに入ってきます。 この部分はelemのなかにあるimgタグについてすべて処理を行います。 elem.find('img').each ( function(index) { // elem内にあるimg分のループ $(this).click ( function() { // imgのclickイベントにopenThumbnailが実行されるように設定 openThumbnail ( options, elem.find('ul li img'), $(this) ); }).mouseover ( function() { // imgのmouseoverイベントでカーソルが指になるように設定 $(this).css ( 'cursor', 'pointer' ); }); }); すなわち、$('#thumbnail')内にあるimgに対してクリックされたらopenThumbnailを実行するように、 オンマウス時にカーソルが指になるようにという処理をしています。
お礼
ありがとうございます！LancerVII様にぜひご質問したいと思っていました！ その節はお世話になりました。 実は以前いただいたスクリプトに改良を加えた別パターンを作りたく、四苦八苦していました。 質問にだした部分が関わっているのではないかと思い今回質問させて頂きました。 形は同じなのですが、htmlのほうでred.jpgをクリックしたときにサブウィンドウに表示される拡大画像の下に別に用意しておいたサブ画像red_on.jpgを追加で表示したいのです。 サブウィンドウのサムネイルをクリックしたときも同じく拡大画像に応じた_onの付いた画像に切り替えたいのです。 自分で手を加えてみたのですが、間違えているかもしれないですがサブウィンドウ上の切替は動きました。ですが最初にサブウィンドウが開いた画面でサブ画像が表示されず、行き詰ってしまいました。 切替のところまでやってみたソースです↓（手を加えた部分のみ抜粋） ---------------------------------------------------------------- writeln ( 'function changeImage(src,title,srcon) {' ); ←srconを加えました writeln ( 'document.getElementById("selimg").src = src;' ); writeln ( 'document.getElementById("seltitle").innerHTML = title;' ); writeln ( 'document.getElementById("sizeimg").src = srcon;' ); ←追加 writeln ( '<div class="main">' ); writeln ( '<img src="' + $selectImage.attr('src') + '" id="selimg">' ); writeln ( '<p id="seltitle">' + $selectImage.attr('title') + '</p>' ); writeln ( '<img src="' + $selectImage.attr('srcon') + '" id="sizeimg">' ); ←追加 writeln ( '</div>' ); writeln ( '<ul>' ); $obj.each ( function(index) { var src = $(this).attr('src'); var title = $(this).attr('title'); var postfix = '_on'; ←追加 var srcon = src.substr(0, src.lastIndexOf('.')) ←追加 + postfix ←追加 + src.substring(src.lastIndexOf('.')); ←追加 var clickStr = "changeImage('" + src + "','" + title + "','" + srcon +"');"; ←srcon追加 writeln ( '<li>' ); writeln ( '<img src="' + src + '" width="' + options.twid + '" onclick="' + clickStr + '">' ); writeln ( '</li>' ); }); writeln ( '</ul>' ); html（そのままです） <body> <div id="thumbnail"> <div class="main"><img src="red.jpg" title="赤"></div> <ul> <li><img src="blue.jpg" title="青"></li> <li><img src="winter.jpg" title="冬"></li> <li><img src="green.jpg" title="緑"></li> </ul> </div> そして別に画像のみ用意（red_on.jpg/blue_on.jpg/winter_on.jpg/green_on.jpg） --------------------------------------------------------------- elemかopenThumbnailの部分にサブ画像も表示させる何かを追加する形になるのでしょうか？ お忙しい所申し訳ないのですがヒントをいただけないでしょうか、よろしくお願いします。
お礼
こういったやり方があるのですね。 今回もいろいろご教授いただき本当にありがとうございました。 引き続き勉強していきたと思います。