Question

我正在尝试创建用户界面，但是当我刷新页面时，它会从导航链接中删除类current。

我正在关注本教程http://www.ssdtutorials.com/tutorials/series/list-grid-view-jquery-cookies.html

以下是我的代码：

$(function() {
    var cc = $.cookie('list_grid');
    if (cc == 'g') {
        $('#products').addClass('grid');
    } else {
        $('#products').removeClass('grid');
    }
});

$(document).ready(function() {

    $('#grid').click(function() {
        $(".current").removeClass("current");
        $(this).addClass("current");

        $('#products').fadeOut(500, function() {
            $(this).addClass('grid').fadeIn(500);
            $.cookie('list_grid', 'g');
        });
        return false;
    });

    $('#list').click(function() {
        $(".current").removeClass("current");
        $(this).addClass("current");

        $('#products').fadeOut(500, function() {
            $(this).removeClass('grid').fadeIn(500);
            $.cookie('list_grid', null);
        });
        return false;
    });

});

如果有人需要，这是HTML代码

<div id="wrapper">

        <div id="navigation">
            <a href="#" id="list">List view</a>
            <a href="#" id="grid">Grid view</a>
        </div>

        <div id="products">

            <?php for($i = 1; $i <= 4; $i++) { ?>

                <div class="product">

                    <div class="wrapper">

                        <div class="image">
                            <img src="images/0<?php echo $i; ?>.jpg" alt="image <?php echo $i; ?>" width="160" height="160" />
                        </div>

                        <div class="description">

                            <h1><a href="#">Article title</a></h1>

                            <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>

                        </div><!-- end description -->

                    </div><!-- end wrapper -->

                </div><!-- end product -->

            <?php } ?>

        </div><!-- end products -->

    </div><!-- end wrapper -->

Answer 1

刷新页面时，它将以原始状态重新加载。它不记得哪个项目有current类。如果您希望页面能够记住哪个类动态地添加了哪个类，您需要使用类似于您已经使用的cookie的东西。

这样的事情：

$(function() {
    var cc = $.cookie('list_grid');
    if (cc == 'g') {
        $('#products').addClass('grid');
        $('#grid').addClass('current');            
    } else {
        $('#products').removeClass('grid');
        $('#list').addClass('current');
    }
});

BTW，$(function() { ... }是编写$(document).ready(function() { ... }的简便方法，因此您实际上可以将上述两个函数组合在一起。

Answer 2

如果您想在上次查看时显示您的对象，请在您的Cookie中保存您的对象类点击次数，刷新您的数据将返回到第一个语句。

页面刷新时删除当前类

2 个答案: