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

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

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

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

Q&A

解決済

1回答

915閲覧

javascript配列内画像へのalt付与の方法

1122

総合スコア5

JavaScript

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

0グッド

0クリップ

投稿2020/04/12 11:57

前提・実現したいこと

配列内のalt(83行目)を有効にしたいのですが、
"undefind"になってしまいます。
※やりたいことは配列内画像にaltを付与したいです。

初心者で初歩的なことかもしれませんが、
ご教授いただけると嬉しいです。

該当のソースコード

引用テキスト

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>サービスタイトル</title> <link rel="stylesheet" type="text/css" href="http://localhost/PR1/css/index.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> </head> <body> <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div class="service_title">サービスタイトル</div> <div id="nav-content"> <nav class="l-drawer__menu"> <ul> <li class="l-drawer__item"> <a class="l-drawer__item-inner" href="./index.html">TOP</a> </li> <li class="l-drawer__item"> <a class="l-drawer__item-inner" href="./about.html">サイトについて</a> </li> <li class="l-drawer__item"> <a class="l-drawer__item-inner" href="/">メニュー</a> </li> </ul> </nav> </div> </div> </header> <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> <!-- footer --> <footer> <p>© All rights reserved by testPR1.</p> </footer> <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 ただし先頭を正解とすること(出題時に選択肢はシャッフルされる)←bingoに変更 var aryQuiz = []; aryQuiz.push( { image :'images/test1.jpg', alt:'test1', bingo:'D', answer : ['A', 'B', 'C', 'D','E',] }, { image :'images/test2.jpg', alt:'test2', bingo:'D', answer : ['A', 'B', 'C', 'D','E',] }, { image :'images/test3.jpg', alt:'test3', bingo:'D', answer : ['A', 'B', 'C', 'D','E',] }, { image :'images/test4.jpg', alt:'test4', bingo:'D', answer : ['A', 'B', 'C', 'D','E',] }, { image :'images/test5.jpg', alt:'test5', bingo:'D', answer : ['A', 'B', 'C', 'D','E',] }, ); 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_cnt>quiz_success_cnt){ //結果表示画面を表示 quizResult(); }else{ //次の問題を設定する quizShow(); } }, 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']);を改変 quizArea.find('.quiz_question').html('<img src="' + aryQuiz[quiz_cnt]['image']+'" alt="'+aryQuiz['alt']+'">'); //正解の回答を取得する var success = aryQuiz[quiz_cnt]['bingo']; //現在の選択肢表示を削除する quizArea.find('.quiz_ans_area ul').empty(); //問題文の選択肢をシャッフルさせる(自作関数) .concat()は参照渡し対策arrShuffle←シャッフル無変更 var aryHoge = (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(); //「quiz_fin_cnt + '問中' +"」削除 var text =quiz_success_cnt + '問正解!'; //結果をサーバーに送信する var result=quiz_success_cnt; var form=document.createElement("form"); form.action ="result.php"; form.method ="post"; form.innerHTML ="<input name='result' type='hidden' value='"+result+"'>" document.body.appendChild(form); form.submit(); /*PHPに飛ばすので不要 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ページで確認できます。

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

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

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

guest

回答1

0

ベストアンサー

aryQuiz['alt']aryQuiz[quiz_cnt]['alt']

投稿2020/04/12 12:02

kei344

総合スコア69606

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

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

1122

2020/04/12 12:04

ありがとうございます! 助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問