Question

我的文档在顶部导航栏中使用了4个链接。单击链接后，右下角的div会改变大小。我想要完成的是使用cookie来记住最后选择的链接。

以下是链接的代码：

<li><a href="#" class="desktop">Desktop</a></li>
<li><a href="#" class="tablet">Tablet</a></li>
<li><a href="#" class="tabletP">Tablet (P)</a></li>
<li><a href="#" class="mobile">Mobile</a></li>

之后我有控制DIV的jQuery代码。

$(document).ready(function () {
    $(".desktop").click(function() {
        $(".iframe").animate({"width" : "100%"},{queue: false, duration: 1000 });
        $(".iframe").animate({"height" : "100%"},{queue: false, duration: 1000 });
    });
    $(".tablet").click(function() {
        $(".iframe").animate({"width" : "1040px"},{queue: false, duration: 1000 });
        $(".iframe").animate({"height" : "488px"},{queue: false, duration: 1000 });
    });
    $(".tabletP").click(function() {
        $(".iframe").animate({"width" : "788px"},{queue: false, duration: 1000 });
        $(".iframe").animate({"height" : "488px"},{queue: false, duration: 1000 });
    });
    $(".mobile").click(function() {
        $(".iframe").animate({"width" : "350px"},{queue: false, duration: 1000 });
        $(".iframe").animate({"height" : "488px"},{queue: false, duration: 1000 });
    });
});

目前我正在使用jQuery Cookie Pluging创建以下代码来创建cookie。我调整了上面的jQuery代码，看起来像这样：

$(".desktop").click(function() {
    $(".iframe").animate({"width" : "100%"},{queue: false, duration: 1000 });
        $(".iframe").animate({"height" : "100%"},{queue: false, duration: 1000 });
        $.cookie("lastState", "desktop", { expires: 7 });
});
$(".tablet").click(function() {
    $(".iframe").animate({"width" : "1040px"},{queue: false, duration: 1000 });
    $(".iframe").animate({"height" : "488px"},{queue: false, duration: 1000 });
    $.cookie("lastState", "tablet", { expires: 7 });
});
$(".tabletP").click(function() {
    $(".iframe").animate({"width" : "788px"},{queue: false, duration: 1000 });
    $(".iframe").animate({"height" : "488px"},{queue: false, duration: 1000 });
    $.cookie("lastState", "tabletP", { expires: 7 });
});
$(".mobile").click(function() {
        $(".iframe").animate({"width" : "350px"},{queue: false, duration: 1000 });
        $(".iframe").animate({"height" : "488px"},{queue: false, duration: 1000 });
    $.cookie("lastState", "mobile", { expires: 7 });
});

现在我需要知道如何读取创建的cookie并提供必要的输出，即自动选择会改变上述div大小的链接。

我看了一些其他问题。 This似乎非常接近我所寻找的。但该问题中提出的代码有点令人困惑

以下是该问题的代码：

$(function() {

    var $activeLink,
        activeLinkHref = $.cookie('activeLinkHref'),
        activeClass = 'activeLink';

    $('.navbar').on('click', 'a', function() {
        $activeLink && $activeLink.removeClass(activeClass);
        $activeLink = $(this).addClass(activeClass);
        $.cookie('activeLinkHref', $activeLink.attr('href'));
    });

    // If a cookie is found, activate the related link.
    if (activeLinkHref) 
    $('.navbar a[href="' + activeLinkHref + '"]').click();

});

我希望我的问题很清楚。

Answer 1

您发布的代码显示了如何从cookie获取值，这是设置从cookie获取值的行：

cookieVal= $.cookie('lastState')

这是检查是否找到任何内容的行：

if (cookieVal)

因此，您知道如何从cookie中获取值，以及如何检查是否找到了值。如果找到了值，则转到下一步，即使用从cookie中获取的值选择特定链接。

您正在将该元素的类存储在cookie中，因此您可以在选择器中将其用于模拟的点击事件ex：

$('.' + cookieVal).click();

使用jQuery通过cookie记住最后选择的href /按钮

1 个答案: