-
ID:IKwZAZ さんの質問

onClick についてご教授いただければと思います。
下記のようにECでよく見かけるメイン画像を、サムネイル画像クリックでメイン切り替えのコードを書いております。

<div>
<a href="AAA" name="img-a">
<img src="AAA" name="img-on"/>
</a>
</div>

<ul>
<li><img src="AAA" onClick="document.img-on.src=’AAA’;document.img-a.href=’AAA’" /></li>
<li><img src="BBB" onClick="document.img-on.src=’BBB’;document.img-a.href=’BBB’" /></li>
</ul>

やりたいことは、サムネイルをクリックした際に、メインの画像のsrcとa要素のhrefを同時に変えたいのですが、行き詰ってしまいました。
どこをどのように変えれば可能でしょうか?
またjavascriptを外部に書かずに実装したいです。

どうかご教授ください。

みんなの回答 1 件

ID:NH0orY さんの回答

<div>
<a href="weeei" id="img-a">
<img src="AAA" name="img-on"/>
</a>
</div>
<ul>
<li><img src="AAA" onClick="imga = document.getElementById(’img-a’);imga.setAttribute(’href’,’hohoho-i’);" /></li>
</ul>
どうぞ

ID:IKwZAZ

さっそくのご回答ありがとうございます。
上記内容で反映させてみたのですが、onClickイベントが反応いたしませんでした。
わたしの書き方が悪いのでしょう。。。
また、上記の場合、メイン画像のname属性は不要になるのでしょうか?
<a >のリンク先は画像と同じURLとなり「AAA」で表記いただけますと幸いです。
ご回答いただいたのに、いろいろとご無理言って申し訳ありません、どうかよろしくお願いいたします。

ID:NH0orY

シングルクォートが全角になってるようです。半角にすれば動きます。
name属性はなくていいです。
「メインの画像のa要素のhrefも変えたい」の条件を詳しく書いてください。挙動がいまいちわかりにくい。

ID:IKwZAZ

トピ主です。
分かりづらくて申し訳ありません。

<li>内の画像をクリックすると、<div>内の<a href="***">の***部分と、その中の<img src="***">の*** 部分が<li>の画像URLに変わるようにしたいのです。
***部分はどちらも同じURLで、<li>内の画像URLに切り替わります。

この説明でわかりますでしょうか??

何度もご丁寧にありがとうございます。
よろしくお願いいたします。

ID:DsO/x5

スキル不足ではなく、文章力不足です。国語から勉強しましょう。

ID:NH0orY

ttp://codepen.io/w3q/pen/jrYpam
米主です。こうですかねー。

ID:IKwZAZ

何度もありがとうございます。
上のコードで実装してみましたが、a要素のhrefが切り替わりませんでした。。こちらの書き方が悪かったのでしょうか?

国語力、、、逆にどのように説明すればわかりやすいのか教えていただけると助かります。

ID:IKwZAZ

他のスクリプトが邪魔することってあるのでしょうか?

ID:IKwZAZ

上のコードでは切り替わっていますので、たぶん他のスクリプトが邪魔してる感じです。ありがとうございました。なんだかいろいろとご迷惑おかけしました。もう少し探ってみます。。。

ID:IKwZAZ

なんだかお礼を言い足りないので、もう一度
本当にありがとうございました!!
参考になったのと同時に、javascriptの勉強になりました!

最終更新日:2016-10-05 (1,356 views)

関連するトピックス

ページ上部に戻る