人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

JQueryを使ったJavascriptについて教えてください。
<img src="images/code01_01l.png" width="75" class="ChangePhoto1">
上のようなリンクがあり、
それを、
$(function(){
$("img.ChangePhoto1").click(function(){
var ImgSrc = $(this).attr("src");
var ImgAlt = $(this).attr("alt");
$("img#MainPhoto1").attr({src:ImgSrc,alt:ImgAlt});
中略
return false;
});
});
のような関数で呼び出していますが、うまく動作しません。
jquery1.7.min.js
とjquery.smoothScroll.js
という外部ファイルを使っています。
なにせJqueryは初めてで何時間も奮闘しましたがわかりません。
概要は、サムネイル(画像)をクリックした際に、関数が問題なく動作出来るようにしたいです。
よろしくお願いします。

●質問者: しゅうすけ
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

質問者から

詳しいScriptコードは
$(function(){ $("img.ChangePhoto1").click(function(){ var ImgSrc = $(this).attr("src"); var ImgAlt = $(this).attr("alt"); $("img#MainPhoto1").attr({src:ImgSrc,alt:ImgAlt}); $("img#MainPhoto1").hide(); $("img#MainPhoto1").fadeIn("slow"); return false; });});</script>
です。
呼び出し周辺のタグは
<div class="code_thum"><a href="#"><img src="images/*****.png" width="75" class="ChangePhoto2">・・・です


1 ● 井戸端さん
●200ポイント

うまく動作しません

スクリプトエラーが出るのかしら?
目的と違う動作になるのかしら?
変化がみられないのかしら?
うまくだけじゃ意味が伝わらないわ。

困ったときはアラートで目的の値を取得できてるか確認してみたりして1ステップずつ行を増やしていくといいわ。

$(function(){ $("img.ChangePhoto1").click(function(){
 var ImgSrc = $(this).attr("src");
 alert(ImgSrc);
}); }); 

$("img#MainPhoto1").attr({src:ImgSrc,alt:ImgAlt});

mapのvalueに変数って使えたかしら?
2つに分けて様子をみて。

$("img#MainPhoto1").attr("src",ImgSrc);
$("img#MainPhoto1").attr("alt",ImgAlt);

a-kuma3さんのコメント
>> mapのvalueに変数って使えたかしら? << value じゃなくて key ですよね。 使えます。 >> 2つに分けて様子をみて。 << attr メソッドでオブジェクトを渡せるのは、仕様で保証されてます。 http://api.jquery.com/attr/#attr-attributes どの回答も吟味した方が良いと思います。

井戸端さんさんのコメント
>> value じゃなくて key ですよね。 << key-valueのvalueよ。 >> 使えます。 << 勉強になりますわ。ありがとうございます。 >> attr メソッドでオブジェクトを渡せるのは、仕様で保証されてます。 << 英語は不勉強でごめんなさいね。どこを見ればよろしいのかしら? >> どの回答も吟味した方が良いと思います。 << いやらしい感じね。意地悪しちゃおうかしら。 >> 動かない原因は、今見ている画像をクリックするところとは、別のところにあります。 << あなたのお答えはそこまでなの?途中までってかわいそうでなくて? あたしは1ステップずつ行を増やしていくといいわ。とお答えしましたわ。 あたしの実力ではこれ以上無理そうに思うけどあなたなら可能よね?期待してるわ。

a-kuma3さんのコメント
>> いやらしい感じね。意地悪しちゃおうかしら。 << そりゃ、どうも <tt>:-p</tt> >> あなたのお答えはそこまでなの?途中までってかわいそうでなくて? あたしは1ステップずつ行を増やしていくといいわ。とお答えしましたわ。 << だからコメントに、コンソールでエラーを確認しましょう、と書きました。 どこにエラーがあるかどうかも分からない状態で、ステップ実行するより、よっぽど早い。 >> あたしの実力ではこれ以上無理そうに思うけどあなたなら可能よね?期待してるわ。 << お任せください。 解決できるかどうかは、分かりませんが、真面目に対応しますので、期待しててね。

しゅうすけさんのコメント
急のぶしつけな質問で言葉が足りず、申し訳ありませんでした。 ステップで実行、コンソールでエラー確認、アラートの活用等、デバッグの手法について学んでいきたいと思います。 本当にありがとうございました。

2 ● a-kuma3
●500ポイント ベストアンサー

サムネイルの画像をクリックしたら、大きく表示したい、みたいなことをやりたいんですよね。
質問の補足に書いてあるコード、基本的に動きますよ。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- jquery-smooth-scroll は、は使ってないけど、一応... -->
<script src="https://raw.githubusercontent.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.js"></script>

<script>
/* 質問の補足に書いてあったコードに、改行を入れた以外は、そのまんまです */
$(function(){
 $("img.ChangePhoto1").click(function(){
 var ImgSrc = $(this).attr("src");
 var ImgAlt = $(this).attr("alt");
 $("img#MainPhoto1").attr({src:ImgSrc,alt:ImgAlt});
 $("img#MainPhoto1").hide();
 $("img#MainPhoto1").fadeIn("slow");
 return false;
 });
});
</script>

<style>
#MainPhoto1 {
 height: 300px;
 margin-bottom: 3px;
}
IMG.ChangePhoto1 {
 cursor: pointer;
}
</style>

<!-- 画像を切り替えて、表示するところ -->
<img src="" id="MainPhoto1">

<!-- サムネイル画像 -->
<div>
<img src="http://cdn1.www.st-hatena.com/users/a-/a-kuma3/user.jpg?1377560470" width="75" class="ChangePhoto1">
<img src="http://f.st-hatena.com/images/fotolife/a/a-kuma3/20140222/20140222183826.jpg" width="75" class="ChangePhoto1">
<img src="http://f.st-hatena.com/images/fotolife/a/a-kuma3/20140412/20140412171756.jpg" width="75" class="ChangePhoto1">
<img src="http://f.st-hatena.com/images/fotolife/a/a-kuma3/20140330/20140330123543.jpg" width="75" class="ChangePhoto1">
</div>

上記のコードを、jsFiddle で試したのがこちらです。期待した動きをしてるんじゃないでしょうか。
http://jsfiddle.net/a_kuma3/YEx4F/1/

思った通りに、動かない原因は、今見ている画像をクリックするところとは、別のところにあります。
だから、何時間も奮闘しても分からないんじゃないか、と思います。



ここから、追記です。

予断を持たせるのはよくない(ぼくにとっても)と思ったので、はっきりとは書きませんでしたが、不親切だ、みたいなことを書かれたので、追記しておきます。
あくまでも想像ですが、問題があるのは .click() を呼び出す前の方にあると思います。

<script>

 ★問題がありそうなのは、こことか★

$(function(){

 ★こことか、なんじゃないかと★

 $("img.ChangePhoto1").click(function(){
 var ImgSrc = $(this).attr("src");
 var ImgAlt = $(this).attr("alt");
 $("img#MainPhoto1").attr({src:ImgSrc,alt:ImgAlt});
 $("img#MainPhoto1").hide();
 $("img#MainPhoto1").fadeIn("slow");
 return false;
 });
});
</script>

上で「★」を付けたあたりでエラーが起きて、処理が中断されている。
だから、クリックしたときの処理を登録するところまでたどり着いていない。


後、無いとは思いますが、念のためにチェックしておいた方が良いのは、この部分。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

ぼくが書いた例では Google がホストしているスクリプトに向けてますけど、どこにあっても同じで、

といったあたりは、確認しておいた方が良いかな、と思います。


a-kuma3さんのコメント
Webブラウザには、何を使ってますか? エラーがあると、javascript のコンソールというところに何かしら表示されます。 どの行でエラー出たかも表示されます。 分かりにくい場合も、多々ありますが、まずは、それを確認してみましょう。 http://www.koikikukan.com/archives/2013/07/31-005555.php Google Chrome、Firefox、Internet Explorer のコンソールの表示の仕方が載ってます。

しゅうすけさんのコメント
お忙しい中本当にありがとうございました。 誤解のないよう念のため申しておきますが、下の方の会話形式のコメントは私のコメントではありません。私が不親切と思ったわけではないので誤解のないようお願いします。

しゅうすけさんのコメント
>上記のコードを、jsFiddle で試したのがこちらです。期待した動きをしてるんじゃないでしょうか。 >http://jsfiddle.net/a_kuma3/YEx4F/1/ このご指摘の件とsasadaさんのご指摘を組み合わせて気が付いたのは#以降がIDの値と一致していないということでした。 なにぶん、即日案件を引き受けてしまい、基礎的なことでの質問にもかかわらず丁寧なご回答ありがとうございます。

a-kuma3さんのコメント
>> 誤解のないよう念のため申しておきますが、下の方の会話形式のコメントは私のコメントではありません。私が不親切と思ったわけではないので誤解のないようお願いします。 << ごめんなさい、ぼくの書き方が悪かった。 質問者と回答者は、アイコン画像が出る位置が左右逆なので、ちゅうすけさんから言われたとは思ってないです。 ちゅうすけさんに、余計なお気遣いをさせて、申し訳ありません。 何はともあれ、解決して良かったです <tt>:-)</tt>

3 ● sasada
●300ポイント

基本的なことで恐縮ですが、確認だけ。
ソースに「img#MainPhoto1」とありますがimg要素のid属性に"MainPhoto1"を設定してますか?


しゅうすけさんのコメント
案件自体は急な依頼でフォローしきれませんでしたが、sasada様のご指摘の部分についてJqueryの勉強の一環として調べてみます。 大変お忙しい中ありがとうございます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ