\r\n\r\n\r\n\r\n
\r\n
\r\n 第0問\r\n
\r\n
\r\n
    \r\n
    \r\n
    \r\n
    \r\n
    \r\n
    \r\n
    \r\n\r\n\r\n\r\n\r\n```","answerCount":1,"upvoteCount":0,"datePublished":"2020-04-01T08:18:56.870Z","dateModified":"2022-01-12T10:55:45.698Z","suggestedAnswer":[{"@type":"Answer","text":"「どのように画像を持つか」がわからないということでしょうか。\r\n```js\r\n{\r\n question :'正解は?',\r\n image :'https://placehold.jp/24/cc9999/993333/350x150.png',\r\n answer : ['A', 'B', 'C', 'D']\r\n}\r\n```\r\n\r\n```js\r\n// quizArea.find('.quiz_question').text(aryQuiz[quiz_cnt]['question']);\r\n// ↓ (たとえば)\r\n quizArea.find('.quiz_question').html('\"\"');\r\n```","dateModified":"2020-04-01T12:19:46.556Z","datePublished":"2020-04-01T12:19:46.556Z","upvoteCount":0,"url":"https://teratail.com/questions/250723#reply-362497","comment":[]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/Web%E3%82%B5%E3%82%A4%E3%83%88","name":"Webサイトに関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/250723","name":"Jquery配列内の画像表示の方法"}}]}}}
    質問するログイン新規登録

    Q&A

    1回答

    1901閲覧

    Jquery配列内の画像表示の方法

    dadada12

    総合スコア4

    Webサイト

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

    jQuery

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

    配列

    配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

    0グッド

    0クリップ

    投稿2020/04/01 08:18

    編集2020/04/01 09:33

    0

    0

    はじめまして。
    web初心者で行き詰っておりまして、お力添えいただけると幸いです。

    Jqueryの配列内に画像を表示させたいのですが、
    どのように対処すればよいのかが分かりません。

    下記、コード内の”正解は?”の箇所を画像に入れ替えたいと考えております。
    { question :'正解は?',
    answer : ['A', 'B', 'C', 'D']}

    調べたのですが中々これっていうのがヒットしなく、
    ご教授の程お願い致します。

    <html lang="ja"> <head> <meta charset="utf-8"> <title>TEST</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div class="quiz_area"> <div class="quiz_set"> 第<span class="quiz_no">0</span>問 <div class="quiz_question"></div> <div class="quiz_ans_area"> <ul></ul> </div> <div class="quiz_area_bg"></div> <div class="quiz_area_icon"></div> </div> <div class="quiz_result"></div> </div> <script> $(function(){ var quizArea = $('.quiz_area'); //クイズを管理するDOMを指定 var quiz_html = quizArea.html(); //もう一度 を押した時に元に戻すため初期HTMLを変数で保管 var quiz_cnt = 0; //現在の問題数を管理 var quiz_fin_cnt = 5; //何問で終了か設定(クイズ数以下であること) var quiz_success_cnt = 0; //問題の正解数 //クイズの配列を設定 //answerの選択肢の数はいくつでもOK ただし先頭を正解とすること(出題時に選択肢はシャッフルされる) var aryQuiz = []; aryQuiz.push( { question :'正解は?', answer : ['A', 'B', 'C', 'D'] } ,{ question :'正解は?', answer : ['A', 'B', 'C', 'D'] } ,{ question :'正解は?', answer : ['A', 'B', 'C', 'D'] } ,{ question :'正解は?', answer : ['A', 'B', 'C', 'D'] } ,{ question :'正解は?', answer : ['A', 'B', 'C', 'D'] } ); quizReset(); //回答を選択した後の処理 quizArea.on('click', '.quiz_ans_area ul li', function(){ //画面を暗くするボックスを表示(上から重ねて、結果表示中は選択肢のクリックやタップを封じる quizArea.find('.quiz_area_bg').show(); //選択した回答に色を付ける $(this).addClass('selected'); if($(this).data('true')){ //正解の処理 〇を表示 quizArea.find('.quiz_area_icon').addClass('true'); //正解数をカウント quiz_success_cnt++; }else{ //不正解の処理 quizArea.find('.quiz_area_icon').addClass('false'); } setTimeout(function(){ //表示を元に戻す quizArea.find('.quiz_ans_area ul li').removeClass('selected'); quizArea.find('.quiz_area_icon').removeClass('true false'); quizArea.find('.quiz_area_bg').hide(); //問題のカウントを進める quiz_cnt++; if(quiz_fin_cnt > quiz_cnt){ //次の問題を設定する quizShow(); }else{ //結果表示画面を表示 quizResult(); } }, 1500); }); //もう一度挑戦するを押した時の処理 quizArea.on('click', '.quiz_restart', function(){ quizReset(); }); //リセットを行う関数 function quizReset(){ quizArea.html(quiz_html); //表示を元に戻す quiz_cnt = 0; quiz_success_cnt = 0; aryQuiz = arrShuffle(aryQuiz); //毎回出題の順番をシャッフルしたい場合はここのコメントを消してね quizShow(); } //問題を表示する関数 function quizShow(){ //何問目かを表示 quizArea.find('.quiz_no').text((quiz_cnt + 1)); //問題文を表示 quizArea.find('.quiz_question').text(aryQuiz[quiz_cnt]['question']); //正解の回答を取得する var success = aryQuiz[quiz_cnt]['answer'][0]; //現在の選択肢表示を削除する quizArea.find('.quiz_ans_area ul').empty(); //問題文の選択肢をシャッフルさせる(自作関数) .concat()は参照渡し対策 var aryHoge = arrShuffle(aryQuiz[quiz_cnt]['answer'].concat()); //問題文の配列を繰り返し表示する $.each(aryHoge, function(key, value){ var fuga = '<li>' + value + '</li>'; //正解の場合はdata属性を付与する if(success === value){ fuga = '<li data-true="1">' + value + '</li>'; } quizArea.find('.quiz_ans_area ul').append(fuga); }); } //結果を表示する関数 function quizResult(){ quizArea.find('.quiz_set').hide(); var text = quiz_fin_cnt + '問中' + quiz_success_cnt + '問正解!'; if(quiz_fin_cnt === quiz_success_cnt){ text += '<br>全問正解!'; } text += '<br><input type="button" value="もう一度挑戦する" class="quiz_restart p-10">'; quizArea.find('.quiz_result').html(text); quizArea.find('.quiz_result').show(); } //配列をシャッフルする関数 function arrShuffle(arr){ for(i = arr.length - 1; i > 0; i--){ var j = Math.floor(Math.random() * (i + 1)); var tmp = arr[i]; arr[i] = arr[j]; arr[j] = tmp; } return arr; } //ここにソースコードを書き込む }); </script> </body> </html>

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

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

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

    バッドをするには、ログインかつ

    こちらの条件を満たす必要があります。

    kei344

    2020/04/01 08:22

    (質問文は編集できます)HTMLも提示してください。また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
    dadada12

    2020/04/01 08:25

    編集いたしました。どうぞよろしくお願い致します。
    kei344

    2020/04/01 09:23

    どの配列に画像が入っているかがわかりませんので、提示してください。
    dadada12

    2020/04/01 09:34

    提示不足で恐れ入ります。 下記の、”正解は?”の箇所に画像を入れたいと考えております。 { question :'正解は?', answer : ['A', 'B', 'C', 'D']}
    guest

    回答1

    0

    「どのように画像を持つか」がわからないということでしょうか。

    js

    1{ 2 question :'正解は?', 3 image :'https://placehold.jp/24/cc9999/993333/350x150.png', 4 answer : ['A', 'B', 'C', 'D'] 5}

    js

    1// quizArea.find('.quiz_question').text(aryQuiz[quiz_cnt]['question']); 2// ↓ (たとえば) 3 quizArea.find('.quiz_question').html('<img src="' + aryQuiz[quiz_cnt]['image'] + '" alt="">');

    投稿2020/04/01 12:19

    kei344

    総合スコア69643

    バッドをするには、ログインかつ

    こちらの条件を満たす必要があります。

    あなたの回答

    tips

    太字

    斜体

    打ち消し線

    見出し

    引用テキストの挿入

    コードの挿入

    リンクの挿入

    リストの挿入

    番号リストの挿入

    表の挿入

    水平線の挿入

    プレビュー

    まだベストアンサーが選ばれていません

    会員登録して回答してみよう

    アカウントをお持ちの方は

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

    ただいまの回答率
    85.29%

    質問をまとめることで
    思考を整理して素早く解決

    テンプレート機能で
    簡単に質問をまとめる

    質問する

    関連した質問