Question

我有单选按钮，点击它们。我正在改变旋转木马。因为每个旋转木马被封装在一个div中，在文件就绪功能上，我隐藏了所有的汽车。然后点击单选按钮，我得到输入的id并显示适当的轮播并隐藏其余的。但问题是，当他们前进到下一个屏幕时，又回来了。文档就绪功能正在执行，所有轮播现在都被隐藏，但我希望显示用户选择的上一个轮播。如何处理这个。

$(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

你最好的选择是history.popState。

在你的changecarousel函数中，需要将id存储到某个持久状态存储（推荐的localStorage）。然后在popState上，查找存储的id并再次调用changecarousel函数。

Answer 2

您可以使用本地存储来存储用户所做的选择。然而，这项技术是在较新的浏览器中实现的（因此，如果强制要求，请关注oldIEs支持）

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

看看这段代码，它使用本地存储实现了一个持久的TODO列表。尝试将项目添加到列表并重新加载页面。 http://codepen.io/BrandonJF/pen/KGwyC

P.S。请记住，您必须清除向导末尾的存储条目或其他任何内容，以便您的用户可以轻松地重新开始。如果用户离开页面而未完成所有步骤，您可能还必须清除选择。

更新：

感谢您提供代码段，请尝试使用此示例： 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)) {
      ...
   }
 }

Answer 3

请使用以下代码，我认为这对您有用。

    $(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;

}

  }

由于

如何处理按下的后退按钮，图像应该是持久的

3 个答案: