Изображения отображаются неправильно

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 .. Я сделал некоторые корректировки - это то, что вы искали?

Перемещенные события кликов, которые будут обрабатываться 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

Это не работает так, как вы думаете (из ваших комментариев). Что происходит после того, как # соответствует точно соответствует идентификатору элемента. Вам нужно будет создать <img id="loadingImage2">, <img id="loadingImage3"> и т. Д., Чтобы этот селектор работал так, как вы планируете.

$("#loadingImage" + num), когда num = 2, например, создает селектор #loadingImage2. Если нет элемента с атрибутом id="loadingImage2", эта строка не будет иметь никакого эффекта. Вы можете позвонить по номеру show(), и jQuery сделает все возможное, чтобы показать этот элемент, но элемент, который вы хотите показать, не существует.

Так если предположить, что у вас есть несколько loadingImages, изменить HTML на что-то вроде этого:

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

Затем в JQuery, выбрать и показать все элементы класса loadingImage с $(".loadingImage").show();