質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.62%

  • JavaScript

    15865questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6521questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Jqueryもしくはモーダルで表示された画像一覧から、選択した画像のURLを表示したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 651

abab7200

score 58

Jqueryで下記要望を実現する際に設定イメージがつかず、どなたかご教授頂ければと存じます。

1:モーダルで表示された画像一覧から、選択した画像のURLとaltを取得し、モーダルをクローズ

2:テキストエリアの中に、imgタグを追加しsrcとaltは1で取得した内容を表示

attr('src',img_url)などで画像のURLを取得することは理解できているのですが、
「選択した」画像のURLを取得することができませんでした。。
恐れ入りますが、どなたかご教授頂ければと存じます

html

<!--   モーダルのコンテンツ-->
<div id="modal-main" >
  <img src="/system/pictures/avatars/000/000/036/medium/IMG_1089.JPG?1506226823" alt="Img 1089"><br>
  <img src="/system/pictures/avatars/000/000/037/medium/IMG_1090.JPG?1506226825" alt="Img 1090"><br>
  <img src="/system/pictures/avatars/000/000/038/medium/IMG_1097.JPG?1506226827" alt="Img 1097"><br>
</div>

<!-- モーダルリンク-->
  <div id="contents">
    <p>
      <a id="modal-open">【クリックで画像一覧のモーダルウィンドウを開きます。】</a>
    </p>
  </div>

  <textarea">
    ここに要望2を反映したい
  </textarea>

モーダルのJS(参考)

$(function(){

    //テキストリンクをクリックしたら
    $("#modal-open").click(function(){
        //body内の最後に<div id="modal-bg"></div>を挿入
        $("body").append('<div id="modal-bg"></div>');

        //画面中央を計算する関数を実行
        modalResize();

        //モーダルウィンドウを表示
        $("#modal-bg,#modal-main").fadeIn("slow");

        //画面のどこかをクリックしたらモーダルを閉じる
        $("#modal-bg,#modal-main").click(function(){
            $("#modal-main,#modal-bg").fadeOut("slow",function(){
                //挿入した<div id="modal-bg"></div>を削除
                $('#modal-bg').remove() ;
            });

        });

        //画面の左上からmodal-mainの横幅・高さを引き、その値を2で割ると画面中央の位置が計算
        $(window).resize(modalResize);
        function modalResize(){

            var w = $(window).width();
            var h = $(window).height();

            var cw = $("#modal-main").outerWidth();
            var ch = $("#modal-main").outerHeight();

            //取得した値をcssに追加する
            $("#modal-main").css({
                "left": ((w - cw)/2) + "px",
                "top": ((h - ch)/2) + "px"
            });
        }
    });
});

モーダルJSの参照元
※モーダルは稼働確認済み 画像取得のJSは具体的なサイト参照はしておりません。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/09/26 21:22

    プラグイン/ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。(URLにはリンクを張ることができます)

    キャンセル

  • abab7200

    2017/09/26 21:57

    kei344様 モーダルの参照元を質問へ追加しました。 画像取得のJSの参照元は特段ございませんので、記載しておりません。

    キャンセル

回答 1

checkベストアンサー

+2

$("#modal-bg,#modal-main").click(function(e){
//...
  $('textarea').text($(e.target).attr('src'));

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/27 20:58

    頂いた内容で対応できましたありがとうございました

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15865questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6521questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。