現在、既存のWebアプリ改修を行っています。
ラジオボタンに選択値によってDiv内容の書き換えを行うようにプログラミングをしたのですが、思うように表示されません。
原因についてお伺いできればと思います。
JSP
1<script type="text/javascript"><!-- 2<%-- ページ読み込み時にラジオボタンをチェックする --%> 3function displayOnload(radio) { 4 if (radio == "画像") { 5 var elements = document.getElementsByClassName("test"); 6 for (var i=0;i<elements.length;i++) { 7 elements[i].innerHTML = "<img style='max-height: 150px; max-width: 150px;' src='${f:url('/download/image')}?path=${f:u(human.photo)}' alt='${f:h(human.attribute.fullName)}' />"; 8 } 9 document.getElementsByName("display")[1].checked = true; 10 document.getElementById('id1').style.display = "none"; 11 document.getElementById('id2').style.display = "block"; 12 } else { 13 document.getElementsByName("display")[0].checked = true; 14 sessionStorage.radio = "リスト"; 15 document.getElementById('id2').style.display = "none"; 16 document.getElementById('id1').style.display = "block"; 17 } 18} 19 20<%-- ラジオボタンによる表示形式の変更 --%> 21function displayChange(str) { 22 radio = document.getElementsByName('display'); 23 if (radio[0].checked) { 24 document.getElementById('id2').style.display = "none"; 25 document.getElementById('id1').style.display = "block"; 26 sessionStorage.radio = "リスト"; 27 } else if (radio[1].checked) { 28 var elements = document.getElementsByClassName("test"); 29 for (var i=0;i<elements.length;i++) { 30 elements[i].innerHTML = "<img style='max-height: 150px; max-width: 150px;' src='${f:url('/download/image')}?path=${f:u(human.photo)}' alt='${f:h(human.attribute.fullName)}' />"; 31 } 32 document.getElementById('id1').style.display = "none"; 33 document.getElementById('id2').style.display = "block"; 34 sessionStorage.radio = "画像"; 35 } 36} 37 38<%-- 準備時 --%> 39$(document).ready(function() { 40 displayOnload(sessionStorage.getItem("radio")); 41}); 42 43--></script> 44 45<!-- ラジオボタン --> 46<p> 47 <input type='radio' name='display' id='radio1' value='1' onclick="displayChange('radio0');"><label for='raddio1'>リスト表示</label> 48 <input type='radio' name='display' id='radio2' value='2' onclick="displayChange('radio1');"><label for='raddio2'>画像表示</label> 49</p> 50 51..... 52<!-- リスト表示用div --> 53<div id="id1" class="class1"> 54 <c:forEach var="human" items="${humanList}" varStatus="status"> 55 <a href="${f:url('/humanMenu/')}${f:u(human.humanCd)}">${f:h(human.attribute.fullName)}</a> 56 </c:forEach> 57</div> 58 59<!-- 画像一覧表示用div --> 60<div id="id2" class="class2" style="display:none"> 61 <c:forEach var="human" items="${humanList}" varStatus="status"> 62 <div class="test" style="width: 150px; text-align: center;"> 63 <%-- ※※※ここの表示がうまくいかない※※※ --%> 64 <%-- <img style="max-height: 150px; max-width: 150px;" 65 src="${f:url('/download/image')}?path=${f:u(human.photo)}" 66 alt="${f:h(human.attribute.fullName)}" /> --%> 67 <div> 68 </c:forEach> 69</div>
元々の作りとしてはすべて読み込んで表示・非表示の切替のみ行っていたのですが、
画像ファイルが結構な数あるため(div class="test")、ページの読み込みに時間がかかってしまっています。
そこで(div class="test")の画像表示文をHTMLに記入せず、ラジオボタンで「画像表示」が選択された場合にHTML文を設定して画像が読み込まれるようにしたいのです。
上記コードでは画像すべてが×(下記画像)になってしまいます。
どのようにすれば改善が見込めますでしょうか…
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。