Question

昨天关注我的问题 HERE

我的网站上有多个可以点击的图片。点击后，jquery会更改所选图像并运行特定的ajax查询。

我现在想要记住图像状态。它们将为ON或OFF。

这是我在上一个问题上建议的jquery cookie代码，用于执行以下图像：

function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}

jQuery(function(){
    if(getCookie("class")=="_on"){   
        $(".img-swap").attr("src",$(".img-swap").attr("src").replace("_off","_on")).addClass("on");
    }
    $(".img-swap").on('click', function() {
        if ($(this).attr("class") == "img-swap") {
            setCookie("class","_on");
            this.src = this.src.replace("_off","_on");
        } else {
            setCookie("class","_off");
            this.src = this.src.replace("_on","_off");            
        }
        $(this).toggleClass("on");
    });
});

现在，我将在表格中拥有同一图像的多个副本。

每个都会分配一个唯一属性 loc ，所有标签的属性名称都是常量，但该值将是唯一的。

<img class="img-swap on" loc="54874000-54AF" title="" src="images/on.png">
<img class="img-swap on" loc="875900AD-C4E2" title="" src="images/on.png">
<img class="img-swap on" loc="845AC804-1A5F" title="" src="images/on.png">

任何人都可以建议最好的方法来记住页面上每个图像的状态。

我认为可以使用 loc 的值并根据该值设置cookie，但我不确定如何获得50多张图片。

感谢所有建议。

Answer 1

JSFIDDLE：

<强> http://jsfiddle.net/9CkDq/8 /

<强> HTML：

<img src="http://www.designchemical.com/lab/media/images/img_swap_off.png" loc="54874000-54AF" alt="" class="img-swap" /> 
<img src="http://www.designchemical.com/lab/media/images/img_swap_off.png" loc="875900AD-C4E2" alt="" class="img-swap" />
<img src="http://www.designchemical.com/lab/media/images/img_swap_off.png" loc="845AC804-1A5F" alt="" class="img-swap" />

<强> JAVASCRIPT：

function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) 
            return c.substring(name.length, c.length);
    }
    return "";
}

jQuery(function(){
    $(".img-swap").each(function(){
        if(getCookie($(this).attr("loc"))=="on"){   
            $(this).attr("src",$(".img-swap").attr("src").replace("_off","_on")).addClass("on");
        }
    });

    $(".img-swap").on('click', function() {
        if ($(this).attr("class") == "img-swap") {
            setCookie($(this).attr("loc"),"on",30);
            this.src = this.src.replace("_off","_on");
        } else {
            setCookie($(this).attr("loc"),"off",30);
            this.src = this.src.replace("_on","_off");            
        }
        $(this).toggleClass("on");
    });
});

JQuery - 记住多个图像状态

1 个答案: