- 締切済み
JS switch文について
JavaScript初心者です。 下記では、div内でphoto1.jpgを表示していますが、ここが別のコードで他の画像に書き換えられるため、下のjsで、画像がクリックされた際にsrcの中身を確認し、それに応じてアンカータグのhrefを書き換えようとしています。 ですが、参照の仕方が悪いのか、switch文が思惑通りに動いてくれません。 どなたか詳しい方、ご教授ください。よろしくお願いいたします。 $("#main a").click(function(){ var mimage = document.getElementById("main-img"); switch(mimage.src){ case "images/photo1.jpg": $("#main a").attr("href","sub1.html"); break; case "images/photo2.jpg": $("#main a").attr("href","sub2.html"); break; case "images/photo3.jpg": $("#main a").attr("href","sub3.html"); break; } }); <div id="main"> <a href="sub1.html"><img src="images/photo1.jpg" alt="" width="700" height="515" id="main-img" /></a> </div>
- studioy_new
- お礼率50% (5/10)
- JavaScript
- 回答数7
- ありがとう数3
- みんなの回答 （7）
- 専門家の回答
みんなの回答
- askaaska
- ベストアンサー率35% (1455/4149)
<div id="main"> <img src="images/photo1.jpg" alt="" width="700" height="515" id="main-img" /> </div> こうしたらどお？ 何箇所か書き直す必要はあると思うけど いきなりリンクで飛ぶことはなくなるんじゃない？
- askaaska
- ベストアンサー率35% (1455/4149)
var mimage = document.getElementById("main-img"); var array = mimage.src.split("/"); switch(array[array.length-1]){ case "photo1.jpg": $("#main a").attr("href","sub1.html"); break; 以下略 } でいいと思う。
お礼
何度か動作確認をした結果、下記のことがわかりました。 main-imgをクリックしてリンク先を表示した後でブラウザの戻るボタンで戻り、main-img(その時点でphoto1に戻っている)を再度クリックすると、alertが表示されました。 その内容は下記の通りです。 file:///xxx/xxx/xxx/xxx/images/photo1.jpg これをcaseの条件にすると、その後の処理が動きます。 ただし、photo1以外がmain-imgに表示されている状態では何度クリックしてもalertは出ません。つまり、クリック時のfunction自体が動いていないようです。（いつも動いていると勘違いしていました。） つまり、main-imgをクリックした際、クリック時のfunctionが動く前にもともとリンクしていたsub1.htmlへ飛んでしまっているような感じです。 このような場合、どうすれば回避できるでしょうか。 何度もすみませんが、ご教示願えれば幸いです。
補足
ありがとうございます。 やってみましたが、だめでした…残念です。
- askaaska
- ベストアンサー率35% (1455/4149)
> alert(mimage.src);を入れて、クリックしてみたのですが、変化なしでした。 それは、switch文以前にその定義したfunctionが実行されていないんじゃないの？ 記述されたHTMLとJavaScriptだけじゃなく、<html>～</html>まで記述していただけるかしら。
補足
いえ、switch文の前に$("#main a").attr("href","sub3.html");を入れてみるとちゃんと変更されるので、それはないと思います。 でも原因は不明…なので、下記に一式貼付けてみます。よろしくお願いいたします。 <!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" xml:lang="ja" lang="ja"> <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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> * { margin:0; padding:0; border:0; } #container { width:820px; margin:20px; } #navi { width:106px; float:right; } #navi li { list-style-type:none; width:106px;/*float:left; */ } #navi li img { border:3px solid #ddd; } #main { width:700px; float:left; } #main a img { position:absolute; } </style> <script type="text/javascript"> $(function(){ $("#navi a").mouseover(function(){ $("#main img").before("<img src='"+$(this).attr("href")+"' alt=''>"); $("#main img:last").fadeOut("fast",function(){ $(this).remove(); }); }); $("#navi a").click(function(){ $("a#vol1").attr("href","sub1.html"); $("a#vol2").attr("href","sub2.html"); $("a#vol3").attr("href","sub3.html"); $("a#vol4").attr("href","sub4.html"); $("a#vol5").attr("href","sub5.html"); $("a#vol6").attr("href","sub6.html"); }); $("#main a").click(function(){ var mimage = document.getElementById("main-img"); switch(true){ case /images\/photo1\.jpg/.test(mimage.src): $("#main a").attr("href","sub1.html"); break; case /images\/photo2\.jpg/.test(mimage.src): $("#main a").attr("href","sub2.html"); break; case /images\/photo3\.jpg/.test(mimage.src): $("#main a").attr("href","sub3.html"); break; } /* switch(mimage.src){ case "images/photo1.jpg": $("#main a").attr("href","sub1.html"); break; case "images/photo2.jpg": $("#main a").attr("href","sub2.html"); break; case "images/photo3.jpg": $("#main a").attr("href","sub3.html"); break; } */ }); }); </script> </head> <body> <div id="container"> <div id="navi"> <ul> <li><a href="images/photo1.jpg" id="vol1"><img src="images/photo1_thum.jpg" alt="シャンデリア" width="100" height="75" /></a></li> <li><a href="images/photo2.jpg" id="vol2"><img src="images/photo2_thum.jpg" alt="バラ" width="100" /></a></li> <li><a href="images/photo3.jpg" id="vol3"><img src="images/photo3_thum.jpg" alt="海" width="100" /></a></li> <li><a href="images/photo4.jpg" id="vol4"><img src="images/photo4_thum.jpg" alt="門" width="100" /></a></li> <li><a href="images/photo5.jpg" id="vol5"><img src="images/photo5_thum.jpg" alt="海" width="100" /></a></li> <li><a href="images/photo6.jpg" id="vol6"><img src="images/photo6_thum.jpg" alt="あじさい" width="100" /></a></li> </ul> </div> <div id="main"> <a href="sub1.html"><img src="images/photo1.jpg" alt="" width="700" height="515" id="main-img" /></a> </div> </div> <br style="clear:both" /> </body> </html>
- imq
- ベストアンサー率72% (16/22)
＞このコードでimagesを追加するときは 正規表現内では、/を\でエスケープしてください。 switch(true){ case /images\/photo1\.jpg/.test(mimage.src): $("#main a").attr("href","sub1.html"); break; case /images\/photo2\.jpg/.test(mimage.src): $("#main a").attr("href","sub2.html"); break; case /images\/photo3\.jpg/.test(mimage.src): $("#main a").attr("href","sub3.html"); break; }
補足
説明ありがとうございます。 でも、残念ながら動きませんでした。
- imq
- ベストアンサー率72% (16/22)
回答1にもありますが、絶対パスになるからでしょう。 正規表現にしておけば絶対でも相対でも動くと思います。 switch(true){ case /photo1\.jpg/.test(mimage.src): $("#main a").attr("href","sub1.html"); break; case /photo2\.jpg/.test(mimage.src): $("#main a").attr("href","sub2.html"); break; case /photo3\.jpg/.test(mimage.src): $("#main a").attr("href","sub3.html"); break; }
補足
詳しくありがとうございます。 画像はすべてimagesというフォルダに入っているのですが、このコードでimagesを追加するときは、下記のようになるでしょうか？ 正規表現もよく分からなくて申し訳ないです。 case /images/photo1\.jpg/.test(mimage.src):
- askaaska
- ベストアンサー率35% (1455/4149)
switch文の直前に alert(mimage.src); を入れれば分かるかも？。
補足
alert(mimage.src);を入れて、クリックしてみたのですが、変化なしでした。 Firefox使っていますが、ブラウザによって変わるのでしょうか？
- yambejp
- ベストアンサー率51% (3827/7415)
mimage.srcをswitchする前にalert(mimage.src)してみてください ブラウザの解釈によりフルパスで入っていたりする場合があります。
補足
alert(mimage.src);を入れて、クリックしてみたのですが、変化なしでした。 Firefox使っていますが、ブラウザによって変わるのでしょうか？
関連するQ&A
- 順番にクラスをつけていく方法
順番にクラスを付与していく方法を考えているのですが、 思いつかないのでご教授ください。 下記のようなソースでギャラリーをjqueryで作成しました。 「次へ」「戻る」を押すと画像が左右にスライドする仕組みにしました。 画像にたいしてフェードをかけようと思い、画像を 初期状態でフェード０にしてactiveクラスがついたときに フェードを１００にしようと思いました。 対象の画像をクリックすることでクラスを追加したり 削除したりする方法はわかったのですが、 「次へ」「戻る」ボタンを押すことで画像を切り替えているため、 どのようにしたら順番に画像にクラスをつけることが できるのかがわかりません。 簡単な方法をご存知の方おられましたら よろしくお願いします。 <div id="gallery"> <ul> <li><a href="#"><img src="images/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo5.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo6.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo7.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo8.jpg" alt="" /></a></li> </ul> </div> <div class="paging"> <a href="#" class="previous">戻る</a> <a href="#" class="next">次へ</a> </div>
- ベストアンサー
- JavaScript
- サムネイル画像のclass切替がうまく動かない。
すみません、jquery初心者です。 下記の様にサムネイルをクリックすると、mainの画像が切り替わる画像ギャラリーを作成しておりまして、 サムネイルをクリックして class="current" を切り替えたいのですが、うまく動きません。 別のサムネイルをクリックすると、最初のclassはremoveされるのですが、 クリックしたサムネイルにclassを付けたいのですが効きません。。 $(document).ready(function() { $(function(){ $('#sum li a').click(function(){ var h = $(this).eq(0).attr('rel'); $('#main img').fadeOut(function(){ ($('#main img').attr("src",h)).fadeIn(); $('#sum li a').removeClass('current'); $(this).addClass('current'); }); return false; }) }); }); <div class="main_area"> <p id="main"><img src="images/img01.jpg" /></p> </div> <ul id="sum" class="clearfix"> <li><a href="#" rel="img01.jpg" class="current"><img src="images/sum01.jpg" /></a></li> <li><a href="#" rel="img02.jpg"><img src="images/sum02.jpg" /></a></li> <li><a href="#" rel="img03.jpg"><img src="images/sum03.jpg" /></a></li> </ul> ご教授頂けると非常に助かります。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jqueryについて（v 1.4.2）
jqueryについて（v 1.4.2） <script type="text/javascript"> $(function() { $("h1").append('<em></em>') $(".thumbs a").click(function() { var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $(".largeImage").attr({ src: largePath, alt: largeAlt }); $("h1 em").html(" (" + largeAlt + ")"); return false; }); }); </script> 【html↓】 <div> <h1>ギャラリータイトル</h1> <p class="thumbs"> <a href="images/img2-lg.jpg" title="タイトル 2"> <img src="images/img2-thumb.jpg" /> </a> <a href="images/img3-lg.jpg" title="タイトル 3"> <img src="images/img3-thumb.jpg" /> </a> <a href="images/img4-lg.jpg" title="タイトル 4"> <img src="images/img4-thumb.jpg" /> </a> <a href="images/img5-lg.jpg" title="タイトル 5"> <img src="images/img5-thumb.jpg" /> </a> <a href="images/img6-lg.jpg" title="タイトル 6"> <img src="images/img6-thumb.jpg" /> </a> </p> <p><img class="largeImage" src="images/img1-lg.jpg" alt="タイトル 1" /></p> </div> 上記と同じ構造のdivが他にもいくつかあるのですが、個々のdiv全てに同じようにjqueryを 適用したいと思っています。 .each()を使ってみたのですが、.thumbsのaをクリックすると全てのdivの.largeImageが 反応してしまいます。 .click()の前に.each()を記述した場合も、後に記述した場合もうまくいきません。 個々のdivに適用するにはどうすればいいのでしょうか。 .each()を使う事自体が間違っているのでしょうか。 初心者なので分かりやすく教えていただければ幸いです。
- ベストアンサー
- AJAX
- jCarouselLiteループ時の属性値取得
jCarouselLiteプラグインにてカルーセルパネルをカスタマイズしています。 IE9/Safari5/FireFox12でテストしています。 jquery-1.7.2.min.js jcarousellite_1.0.1.js 独自スクリプトでクリックされたときの<a>のhref属性値を取得できるかアラート表示させて確認してみると <ul></ul>に囲まれた分５つの１ループ目はそれぞれ取得できるのですが、２ループ目以降の<a>のhref属性が取得できません。 現在、無限ループするように設定し、それはできています。 =======独自スクリプト========== $(function() { $("#carousel .anyClass a").click(function(){ alert($(this).attr("href"))；//←２周目のhref属性が取得できない }); }); ============================ =======htmlソース=========== <div id="carousel"> <div class="anyClass"> <ul> <li><a href="img/photo1.jpg"><img src="img/photo1_thum.jpg" alt="" class="01" /></a></li> <li><a href="img/photo2.jpg"><img src="img/photo2_thum.jpg" alt="" class="02" /></a></li> <li><a href="img/photo3.jpg"><img src="img/photo3_thum.jpg" alt="" class="03"/></a></li> <li><a href="img/photo4.jpg"><img src="img/photo4_thum.jpg" alt="" class="04"/></a></li> <li><a href="img/photo5.jpg"><img src="img/photo5_thum.jpg" alt="" class="05"/></a></li> </ul> </div> </div> ============================ お手数ですがご教授ください。お願いします。
- ベストアンサー
- JavaScript
- 同HTML内で複数のjQueryを設置したいです
買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか？ 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
- 二重の画像切り替え
以下のようなJavaScriptを作りたいと考えております。 非常にレベルの低い内容で申し訳ないのですが、どうかみなさんの知恵を貸していただけば幸いです。 （ちなみにJavaScriptで処理品ければいけない成約がありますので、他の方法は今回はすみません。） 見せるのも恥ずかしいレベルのソースですが、ソースも載せます。 ＣのいずれかをクリックするとＢの３つのサムネイル画像がすべて切替り、 更にＢのいずれかをクリックすると拡大画像のＡが切替るJavaScriptを作りたいと考えております。 ┌──┐ │拡大│←Ａ（Ｂの拡大画像） └──┘ ┌─┐┌─┐┌─┐ │前││横││後│←Ｂ（車の各方向からの写真画像） └─┘└─┘└─┘ ┌─┐┌─┐┌─┐ │赤││青││黒│←Ｃ（車のカラーバリエーション） └─┘└─┘└─┘ ◆◆◆現在のソース◆◆◆ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script> <!--Ａ（Ｂの拡大画像）--> <div id="main_img"><img id="target_main" src="images/red_head.jpg" width="450" height="190" alt="image"></div> <!--Ｂ（車の各方向からの写真画像）--> <div class="thumbnail"> <ul> <li><a href="images/red_head.jpg"><img id="target_thumbnail_01" src="images/red_head.jpg" width="100" height="41" alt="gold_01"></a></li> <li><a href="images/red_side.jpg"><img id="target_thumbnail_02" src="images/red_side.jpg" width="100" height="41" alt="gold_02"></a></li> <li><a href="images/red_back.jpg"><img id="target_thumbnail_03" src="images/red_back.jpg" width="100" height="41" alt="gold_03"></a></li> </ul> </div> <!--Ｃ（車の各方向からの写真画像）--> <div class="color"> <ul> <li><a href="○○○"><img src="images/wheat.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/java.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/graphite.jpg" width="78" height="26" alt="sample01"></a></li> </ul> </div> <!--メインイメージ切り替えスクリプト--> <script type="text/javascript"> $(document).ready( function() { $(".thumbnail a").click( function() { var changeSrc = $(this).attr("href"); $("#target_main").fadeOut("slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); return false; }); }); </script> <!--カラー切り替えスクリプト--> ・ ・ ・
- 締切済み
- JavaScript
- jQuery マウスオーバーのたびに処理を繰り返す
よろしくお願いします。 jQueryを使用して、「サムネイルにマウスを乗せると別のDiv内に大きい画像とtitle属性のテキストを表示させる」というものを作ろうとしています。 別のDiv要素には上下左右中央に画像を表示させたいと思い、見よう見まねで下記のようなコードを作成したのですが、表示される画像がサムネイル時の大きさに縮小されてしまい、元の大きさの画像として表示されません。（サムネイルには元画像をcssで縮小して表示しています） やりたいことは以下の２つです。 ・Div要素には元画像の大きさで表示させたい。 ・できれば、フェードイン・アウトで画像を切り替えたい。 色々調べてみたのですが行き詰ってしまい、こちらに質問させて頂きました。 お分かりになる方がいらっしゃいましたら、お知恵をお貸し頂けませんでしょうか。 ////スクリプト//// $(function(){ $('#contents li a').click(function(){ return false; }); $('#contents li a').mouseover(function(){ var $title = $(this).children('img').attr('title'); var w = $(this).children('img').width(); var h = $(this).children('img').height(); $('#photo img').attr('src',$(this).attr("href")); $('#photo span').text($title); var mtop = (h/2)*(-1); var mleft = (w/2)*(-1); $('#photo img').css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ "px"}); }); }); ////HTML//// <div id="contents"> <ul> <li><a href="1.jpg"><img src="1.jpg" title="あああああああああああああああ" /></a></li> <li><a href="2.jpg"><img src="2.jpg" title="いいいいいいいいいいいいいいい" /></a></li> <li><a href="3.jpg"><img src="3.jpg" title="ううううううううううううううう" /></a></li> </ul> </div> <div id="photo"> <img src="1.jpg" /> <span>テキストテキスト</span> </div>
- ベストアンサー
- JavaScript
- jquery1.4で画像とリンクの切り替えを行おうとしています。
jquery1.4で画像とリンクの切り替えを行おうとしています。 ひとまず動き的にはうまくは行っているのですが、切り替え対象の複数の画像をfloat:left;等で 横並びにすると、切り替えるたい画像をクリック後に規定の場所に画面が移動してしまいます。 対処法があれば教えていただけますでしょうか？ 【javascript】 $(document).ready( function() { $(".thumbnail p").click( function() { var changeSrc = this.src; var changeHref = this.href; $("#target img").fadeOut("fast", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); $("#target a").attr("href", changeHref); }); $(".thumbnail2 img").click( function() { var changeSrc = this.src; $("#target2").fadeOut( "slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); }); $(".thumbnail3 img").click( function() { var changeSrc = this.src; $("#target3").slideUp( "slow", function() { $(this).attr("src", changeSrc); $(this).slideDown(); } ); }); }); </script> 【HTML】 <div> <p id="target"><a href="./main.cgi?mode=details2&sid=1&gid=1S000046"><img src="./g_images/IMG_1457.jpg" width="240" height="320" alt="ブランドカテゴリー" /></a></p> </div> <div class="thumbnail"> <p href="./main.cgi?mode=details2&sid=1&gid=1S000043" src="./g_images/IMG_1457.jpg" class="item"> <img src="./g_images/IMG_1457.jpg" width="90" height="150" alt="ブランドカテゴリー" /> <br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000043">詳細</a></p> <p href="./main.cgi?mode=details2&sid=1&gid=1S000047" src="./g_images/IMG_1469.jpg" class="item"> <img src="./g_images/IMG_1469.jpg" width="90" height="150" alt="ブランドカテゴリー" /> <br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000047">詳細</a></p> </div> 【css】 .thumbnail { height:200px; text-align:center; } .item { float:left; padding-left:10px; margin-left:10px; }
- ベストアンサー
- JavaScript
- jQueryの隣接セレクターが上手く動作しない
jQueryを用いてギャラリーのページを作成しています。 ページのイメージは上部にサムネイル画像が並べてあり、その下にクリックされたサムネイル画像に対応する大きな画像を表示するというものです。その中で隣接セレクターが上手く動作せず悩んでいます。どなたか教えていただきたく、よろしくお願いいたします。 具体的には HTML部分 <\-- サムネイル部分 --> <div id="navi"> <ul> <li> <a href="images/img1.jpg"><imgsrc="images/img1_thum.jpg" alt="作品１" /></a> </li> ： ： </ul> </div> <\-- 大きな画像表示部分 --> <div id="main"> <img src="とりあえず最初の作品のパス" alt="最初の作品"/> </div> jQuery部分 $(function(){ $("#navi a").click(function(){ var filename=$(this).attr("href"); var altname=$("+img",this).attr("alt"); ： ： ここで、filenameには a要素のhref属性の値が入るのですが、altnameが undefined になってしまいます。 私は $("+img",this).attr("alt"); で this (この場合はa要素)の次のimg要素のalt属性 (たとえば「最初の作品」)が返ると考えているのですがなにが間違っているのでしょうか？
- ベストアンサー
- JavaScript
- スライド部分のリンクが貼れない・・・
トップページスライダー部分のリンクが貼れなくて困っています。 原因を探しているのですがわかりません・・・解る方教えてください。 スライド部分のHTML <div id="window"> <div id="slider"> <div class="slider-view"> <div class="slider-container"> <div><a href="#"><img src="http://blackartcard.com/slider1/images/sliderimg1.jpg" alt="" /></a></div> <div><a href="#"><img src="http://blackartcard.com/slider1/images/sliderimg2.jpg" alt="" /></a></div> <div><a href="/?p=542"><img src="http://blackartcard.com/slider1/images/sliderimg3.jpg" alt="" /></a></div> </div><!-- // .slider-container --> </div><!-- // .slider-view --> </div> </div>
- ベストアンサー
- CSS
お礼
ありがとうございます。やってみます。