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>
.....

我正在考虑通过ID在Cookie中覆盖图像，当用户返回主页时，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的支持＆lt; 9，因为我不知道您是否使用jQuery或您自己的方法来实现跨浏览器兼容性：

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);

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

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

1 个答案: