如何从图像滑块中通过 ID 获取图像并将其存储到 cookie 中？

Question

我在 asp.net MVC 应用程序的主页中有一个包含 5 张图片的图像滑块。现在，当用户单击应用程序中的其他菜单选项卡时，图像滑块的最后一次看到的图像应该存储在 cookie 中。所以当用户回到主页时，图像滑块将从最后看到的图像开始。我的chtml：

 <div id="sliderFrame">
    <div id="slider"> 
    <a id="image1" href='#' class='linkdisabled'>
    <img src="~/content/Internal/Images/image1.jpg" alt="" />
    </a>
    <a id="image2" href='#' class='linkdisabled'>
    <img src="~/content/Internal/Images/image2.jpg" alt="" />
    </a>
.....

我正在考虑通过 cookie 中的 ID 覆盖图像，当用户返回主页时，cookie 中最后存储的图像将显示在图像幻灯片中。 但是如何获取图像 id 并将其存储到 cookie 中？请帮忙。

Answer 1

首先，获取链接的容器以及该容器内的链接集合

var slider = document.getElementById("slider");
var links = slider.getElementsByTagName("a");

接下来，初始化一个设置cookie的方法

function setCookie(){
    document.cookie="lastSeenImageId=" + this.id;
}

为每个链接添加事件侦听器。注意：在这个例子中，我不考虑对 Internet Explorer

for(var i=0; i<links.length; i++){

    links[i].addEventListener("click", setCookie, false);

    /*(function(j){
        links[j].attachEvent("onclick", function(){
            setCookie.call(links[j]);
        });
    })(i);*/

}

最后，在页面加载时触发点击事件

function fireAnEvent(){

    var cookie = document.cookie;

    if(cookie && document.cookie.test(/lastSeenImageId=([^;]+)/)){
        var link = document.getElementById(RegExp.$1);
        link.click();    
    }

}

window.addEventListener("load", fireAnEvent, false);
// window.attachEvent("load", fireAnEvent);

此代码只是一个示例，可能需要根据您的需要进行一些更正。