画像の切り替え・そのaltを使ったJqueryの記述

プログラミングを初めて二ヶ月です。
初歩的な質問ですがアドバイスいただければと存じます。

現在画像をホバーで切り替え、さらにそれにキャプションをつける機能を実装しています。
しかしそれにコメントを表示するのがうまくできないです、、、

https://gyazo.com/6a2ed70010ed443806d5fe145a1966f0
現在は以上のssのように画像の上にカーソルを置くと右側に大きく表示されます。

以下は現在のコードです。
<div class="mainImage"> の上にたくさん画像が設置してあってホバーでこのmainImageクラスに出力されます。
これで画像の切り替えの実装がなんとかできました。

<div class="mainImage">
 <%= image_tag @post.main_image_url, class:"alt_text" %>
</div>

<script type="text/javascript">
$(function(){
 $('.thumbnails img').hover(function(){
  var $thisImg = $(this).attr('src');
  var $thisAlt = $(this).attr('alt');
  $('.mainImage img').attr({src:$thisImg,alt:$thisAlt});
  
 });
});
</script>

###発生している問題・エラーメッセージ

現在はこのように出力されています。
<img class="alt_text" src="/uploads/post/appeal_2/33/main_pic_20170918110403.jpg" alt="ああああああ">
このaltの値を取得してキャプション風に表示するjqueryがうまくかけないです。

###試したこと
https://nelog.jp/alt-img-caption
以上の記事を参考にしましたが、うまくできませんでした。

画像のatlを取得
それを出力する

の以上のコードを書きたいです。
MRCはrailsで書いています。
アドバイスいただければ幸いです。

kei344

2017/10/16 15:28

teratailでは画像もアップできますので、そちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）また、「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

Takuuuu

2017/10/17 04:08

丁寧なアドバイスありがとうございます。修正させていただきます。

行動規範の内容に同意します

回答1件

ベストアンサー

的外れかもしれませんが、質問者さんの実現したいことは以下のように行えると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<div class="thumbnails">
9    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=1" class="alt_text" alt="1">
10    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=2" class="alt_text" alt="2">
11    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=3" class="alt_text" alt="3">
12</div>
13<div class="mainImage">
14    <img src="" alt="">
15    <p></p>
16</div>
17<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
18<script>
19    $(function () {
20        $('.thumbnails img').hover(function () {
21            var $thisImg = $(this).attr('src');
22            var $thisAlt = $(this).attr('alt');
23            $('.mainImage img').attr({src: $thisImg, alt: $thisAlt});
24            $('.mainImage p').text($thisAlt);
25        });
26    });
27</script>
28</body>
29</html>