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は初めてで何時間も奮闘しましたがわかりません。
概要は、サムネイル(画像)をクリックした際に、関数が問題なく動作出来るようにしたいです。
よろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/04/23 07:36:37
  • 終了:2014/04/23 18:19:41
id:tyusuke88

詳しい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">・・・です

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4440ベストアンサー獲得回数18242014/04/23 08:51:57

ポイント500pt

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

<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 がホストしているスクリプトに向けてますけど、どこにあっても同じで、

  • URL のスペルミスをしていないか
  • タグのスペルミスをしていないか

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

他2件のコメントを見る
id:tyusuke88

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

2014/04/23 18:33:33
id:a-kuma3

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

ごめんなさい、ぼくの書き方が悪かった。
質問者と回答者は、アイコン画像が出る位置が左右逆なので、ちゅうすけさんから言われたとは思ってないです。
ちゅうすけさんに、余計なお気遣いをさせて、申し訳ありません。

何はともあれ、解決して良かったです :-)

2014/04/23 19:25:31

その他の回答(2件)

id:watercooler No.1

井戸端さん回答回数289ベストアンサー獲得回数512014/04/23 08:15:32

ポイント200pt

うまく動作しません

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

困ったときはアラートで目的の値を取得できてるか確認してみたりして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);
他2件のコメントを見る
id:a-kuma3

いやらしい感じね。意地悪しちゃおうかしら。

そりゃ、どうも :-p

あなたのお答えはそこまでなの?途中までってかわいそうでなくて?
あたしは1ステップずつ行を増やしていくといいわ。とお答えしましたわ。

だからコメントに、コンソールでエラーを確認しましょう、と書きました。
どこにエラーがあるかどうかも分からない状態で、ステップ実行するより、よっぽど早い。

あたしの実力ではこれ以上無理そうに思うけどあなたなら可能よね?期待してるわ。

お任せください。
解決できるかどうかは、分かりませんが、真面目に対応しますので、期待しててね。

2014/04/23 12:57:20
id:tyusuke88

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

2014/04/23 18:27:51
id:a-kuma3 No.2

a-kuma3回答回数4440ベストアンサー獲得回数18242014/04/23 08:51:57ここでベストアンサー

ポイント500pt

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

<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 がホストしているスクリプトに向けてますけど、どこにあっても同じで、

  • URL のスペルミスをしていないか
  • タグのスペルミスをしていないか

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

他2件のコメントを見る
id:tyusuke88

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

2014/04/23 18:33:33
id:a-kuma3

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

ごめんなさい、ぼくの書き方が悪かった。
質問者と回答者は、アイコン画像が出る位置が左右逆なので、ちゅうすけさんから言われたとは思ってないです。
ちゅうすけさんに、余計なお気遣いをさせて、申し訳ありません。

何はともあれ、解決して良かったです :-)

2014/04/23 19:25:31
id:sasada No.3

sasada回答回数1482ベストアンサー獲得回数1332014/04/23 10:44:05

ポイント300pt

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

id:tyusuke88

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

2014/04/23 18:25:36

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません