이미지가 올바르게 표시되지 않습니다.

Question

이전 질문에서 코드를 업데이트했지만 이미지가 표시되지 않으며 그 이유를 정확하게 알지 못합니다. 이미지가 표시되어야하는 버튼 하나를 클릭하고 새로 고침을하더라도 버튼을 클릭하면 다른 버튼을 클릭 할 때까지 새 이미지가 인계되어야하고 동일한 작업이 수행되어야합니다. 클릭 할 때까지 페이지가 새로 고쳐 지더라도 그대로 두어야합니다. 다른 버튼에는 있지만 이미지는 전혀 표시되지 않습니다. 여기

내 기능입니다 :

var maxImages=7,i=1,v; 

for(i;i=<maxImages;i++) 
{ 
    v = sessionStorage.getItem('v'+i); 
    if(v !== null) showImage(i); 
} 

function showImage(num) 
{ 
    sessionStorage.setItem('v' + num, '1'); 
    $("#loadingImage" + num).show(); 
} 

여기 내 버튼 기능입니다 :

<input name="Failure Analysis Lab" style="white-space:normal;" 
onclick="moveText(this.name);showImage(1);form1.submit();" 
style="width: 272px; height: 30px;" type="button" 
value="7QKD Failure Analysis Lab" /> 

여기 내 이미지 태그입니다 : 어떤 도움을 크게 감상 할 수

<img id="loadingImage" alt="" src="images/Overview.gif" 
style="width:85%;; margin-bottom:3em; display:none;"/> 

, 고맙습니다.

추가 정보 : 콘솔을 확인했지만 아무 이미지도 표시되지 않고 오류가 표시됩니다.

Answer 1

체크 아웃이 fiddle을 가진 클래스 loadingImage의 모든 요소를 ​​보여 나는 당신이 찾고 있던 이런 종류의 조정을했습니다.

jQuery에서 처리 할 클릭 이벤트를 이동하고 각 입력에 대한 데이터를 설정하여 표시 할 이미지를 확인하십시오. 이미지

가

var v = sessionStorage.getItem('imageId'); 
if (v !== null) { 
    showImage(v); 
} 

$("input").on("click", function() { 
    var imageId = $(this).attr("imageId"); 
    showImage(imageId); 
}); 

function showImage(imageId) { 
    var img = $("#" + imageId); 
    var hidingImg = sessionStorage.getItem('imageId'); 
    $("#" + hidingImg).hide(); 
    sessionStorage.setItem('imageId', imageId); 
    img.show(); 
} 

Answer 2

(의견에 따르면) 생각대로 작동하지 않습니다. # 이후에 오는 것은 인데 정확히은 요소 ID와 일치합니다. 해당 선택기가 의도 한대로 작동하려면 <img id="loadingImage2">, <img id="loadingImage3"> 등을 만들어야합니다.

$("#loadingImage" + num) 예를 들어 num = 2 일 때 선택자 #loadingImage2이 생성됩니다. 속성이 id="loadingImage2" 인 요소가 없으면이 행은 적용되지 않습니다. show()을 호출 할 수 있습니다. jQuery가 그 요소를 보여주기 위해 최선을 다할 것입니다. 그러나 보여주고 자하는 요소는 존재하지 않습니다.

그래서 당신이 이런 식으로 HTML을 변경, 여러 loadingImages을 가지고 있다고 가정 :

<img class="loadingImage" src="image1.jpg"> 
<img class="loadingImage" src="image2.jpg"> 
<!-- And so on --> 

당신의 jQuery를 선택에서 다음

및 $(".loadingImage").show();