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

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 函数。