JQuery - 记住多个图像状态

Question

作为我昨天问题的后续，HERE

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

我现在希望记住图像状态。它们将打开或关闭。

这是在我之前的问题中建议使用 ONE 图像执行此操作的 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");
    });
});