Как обращаться с нажатой кнопкой «Назад», изображение должно быть постоянным

Question

У меня есть переключатели, на которых нажимают на них. Я меняю карусели. для этого каждая карусель заключена в div, по функции готовности документа я прячу все карусели. И при нажатии на переключатель, я получаю идентификатор ввода и показываю соответствующие карусели и скрываю оставшиеся. Но дело в том, когда они идут вперед к следующему экрану и возвращаются. Функция готовности документа выполняется, и все карусели скрыты, но я хочу, чтобы предыдущая карусель была выбрана пользователем. Как справиться с этим.

$(document).ready(function(){ 

      $('.car1').hide(); 
      $('.car2').hide(); 
      $('.car3').hide(); 
      $('.car4').hide(); 
    $(".changeprice").on("click", function() { 
     var currentid = this.id; 
     console.log(currentid); 
     changecarousel(currentid); 
    }); 
}); 



function changecarousel(id){ 



    switch(parseInt(id)){ 
     case 1: 
      $('.car1').show(); 
      $('.car2').hide(); 
      $('.car3').hide(); 
      $('.car4').hide(); 
      console.log(id); 
     break; 

     case 2: 
      $('.car1').hide(); 
      $('.car2').show(); 
      $('.car3').hide(); 
      $('.car4').hide(); 
      console.log(id); 
     break; 

     case 3: 
      $('.car3').show(); 
      $('.car1').hide(); 
      $('.car2').hide(); 
      $('.car4').hide(); 
      console.log(id); 

     break; 

     case 4: 
      $('.car4').show(); 
      $('.car1').hide(); 
      $('.car2').hide(); 
      $('.car3').hide(); 
      console.log(id); 
     break; 

    } 

} 

Answer 1

Пожалуйста, используйте ниже код, который я думаю, что будет работать для вас.

$(document).ready(function(){ 

$('.car1').hide(); 
$('.car2').hide(); 
$('.car3').hide(); 
$('.car4').hide(); 

if(localStorage.getItem("lastCarousel") != null){ 
    $('.'+localStorage.getItem("lastCarousel")).show(); 
    localStorage.removeItem("lastCarousel"); 
} 
    $(".changeprice").on("click", function() { 
    var currentid = this.id; 
    console.log(currentid); 
    changecarousel(currentid); 
}); 
    }); 


    function changecarousel(id){ 

       $('.car1').hide(); 
     $('.car2').hide(); 
     $('.car3').hide(); 
     $('.car4').hide(); 

switch(parseInt(id)){ 
    case 1: 
     $('.car1').show(); 
     localStorage.setItem("lastCarousel", "car1"); 
     console.log(id); 
    break; 

    case 2: 
     $('.car2').show(); 
     localStorage.setItem("lastCarousel", "car2"); 
     console.log(id); 
    break; 

    case 3: 
     $('.car3').show(); 
     localStorage.setItem("lastCarousel", "car3"); 
     console.log(id); 

    break; 

    case 4: 
     $('.car4').show(); 
     localStorage.setItem("lastCarousel", "car4"); 
     console.log(id); 
    break; 

} 

    } 

Благодаря

Answer 2

Ваш лучший выбор - history.popState.

В вашей функции changecarousel необходимо сохранить идентификатор в каком-либо постоянном хранилище состояний (рекомендуется локальное хранилище). Затем в popState, ищем этот сохраненный идентификатор и снова вызываем функцию changelarousel.

Answer 3

Вы можете использовать локальное хранилище для хранения выбора, сделанного пользователями. Однако эта технология реализована в новых браузерах (поэтому обратите внимание на старичков поддержку, если это обязательно)

localStorage.clear(); 
... 
localStorage.setItem(foo, bar); 
... 
var bar = localStorage.getItem(foo); 

Взгляните на этот код, он реализует постоянный TODO-лист, используя локальное хранилище. Попробуйте добавить элементы в список и перезагрузить страницу. http://codepen.io/BrandonJF/pen/KGwyC

P.S. Помните, что вам нужно очистить записи хранилища в конце вашего мастера или что угодно, чтобы ваши пользователи могли легко начать все заново. Вам также может потребоваться очистить выделение, если пользователь покинет страницу, не пройдя все шаги.

UPDATE:

Благодарим за фрагмент кода, попробуйте использовать этот пример: http://codepen.io/anon/pen/yedvXz

$(document).ready(function() { 

    $('.car1').hide(); 
    $('.car2').hide(); 
    $('.car3').hide(); 
    $('.car4').hide(); 

    $(".changeprice").on("click", function() { 
    var currentid = this.id; 
    changecarousel(currentid); 
    }); 

    carValue = localStorage.getItem('carValue'); 
    if (carValue) { 
    changecarousel(carValue); 
    } 
}); 

function changecarousel(id) { 
    console.log(id); 
    localStorage.setItem('carValue', id); 
    switch (parseInt(id)) { 
     ... 
    } 
}