Q&A
（質問文は編集できます）HTMLも提示してください。また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
はじめまして。
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>
回答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
総合スコア69458
あなたの回答
tips
プレビュー
