jQuery .attr での画像src取得が上手くいかない

Question

前提・実現したいこと

複数ある画像（小画像）からクリックされた特定の画像srcを .attr で取得し、 下記.disc-big（大画像） へsrc追加した後に　下記#disc-right　を表示する、というフローを行いたいです。

しかし、他の要素は出現するものの、srcが上手く取得できていないせいか画像が表示されません。

修正するべき点はどこでしょうか？
下記　#disc-right　は初期設定で　display: none;　しています。

小さいイメージリスト

<div class="disc-table"> <ul id="discs"> <li class="single" data-groups='["single"]'><img class="disc" src="./image/hp_single.png" alt=""></li> <li class="single" data-groups='["single"]'><img class="disc" src="./image/hp_single.png" alt=""></li> <li class="single" data-groups='["single"]'><img class="disc" src="./image/hp_single.png" alt=""></li> </ul> </div>

大きいイメージ

<div id="disc-right"> <img class="disc-big" alt=""> <p>hello world</p> <p>2017/00/00</p> </div>

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

該当のソースコード

  $('.disc').click(function(){
    var src = $(this).attr('src');
    $('.disc-big').attr('src','src');
    $('#disc-right').fadeIn();
  });

試したこと

これだと画像以外のみ表示されてしまいます。ブラウザでソースを確認してみたところ、
<img class="disc-big" src="src" alt="">
となっており、パスもどうやら
file:///Users/---/---/src
と存在しないファイルへのパスとなってました。（これが正常かどうかはわかりません。。。）

よろしくお願いいたします。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

  $('.disc').click(function(){
    var src = $(this).attr('src');
    $('.disc-big').attr('src', src);//ここが変更点
    $('#disc-right').fadeIn();
  });

直接URLを記述する際はクォーテーションが必要ですが、変数の際は必要ありません|ーﾟ)

Comments

[mogiruri]

haru_hime 様
回答ありがとうございます！解決できました！かなり初歩的ですよね、、、きっちり確認していきます、、、

[退会済みユーザー]

解決して何よりです。私もたまにポカミスに気付かなくてアタフタしてます(笑)
さて、初めての質問かなとお見受けしましたので使用方法の誘導を致します。
解決した場合は「質問を解決済み」にしなければなりませんので下記のURLを参考に質問方法を知り、次の質問の際にお役立て下さい|ーﾟ)
https://teratail.com/help

[mogiruri]

haru_hime 様
ベストアンサーが遅くなってしまいすみません！使い方まで教えていただきありがとうございます！これから役立てていきたいと思います：）