我如何制作一个 cookie 来保存这些 div 标签的位置?

发布于 2024-12-02 03:20:03 字数 1268 浏览 0 评论 0原文

我正在使用 JQuery 来重新排序我的 div(代码如下),但我需要制作一个 cookie 来保存这些 div 的顺序。我看到很多网站都提出了 Javascript 的东西,但它通常会说诸如保存输入的名称之类的内容。我不知道如何去做这件事。

$().ready(function() {
    $('.moveUpCls').click(function(event){
      var current = $(this).parent().parent().parent();
      current.prev().before(current);
    });
    $('.moveDownCls').click(function(){
      var current = $(this).parent().parent().parent();
      current.next().after(current);
    });
});

每个可移动的 div 都遵循这种模式(div 上也有隐藏/显示,但暂时忽略它):

<div>
    <div id="tabHeader">

        <div id="headMoveUp"><a class="moveUpCls"><img src="images/uparrow.png"></a></div>
        <div id="headMoveDown"><a class="moveDownCls"><img src="images/downarrow.png"></a></div>
        <a href="javascript:toggle();"><div id="tabHeadText">Important Links &raquo;</div> </a>

    </div>
        <div id="toggleText" style="display:none; text-align:center;">
            <div id="empGuide" style="text-align:center;margin-left:auto; margin-right:auto;">

                CONTENT OF DIV

            </div>
        </div>
        <br />

</div>

I am using JQuery to have the ability to reorder my divs (code below), but I need to make a cookie to save the order of these divs. I see alot of site coming up with Javascript stuff, but its usually saying things like save an inputted name and such. I have no clue how to go about doing this.

$().ready(function() {
    $('.moveUpCls').click(function(event){
      var current = $(this).parent().parent().parent();
      current.prev().before(current);
    });
    $('.moveDownCls').click(function(){
      var current = $(this).parent().parent().parent();
      current.next().after(current);
    });
});

Each moveable div follows this pattern (The div's also have hide/show on em, but ignore that for the time being):

<div>
    <div id="tabHeader">

        <div id="headMoveUp"><a class="moveUpCls"><img src="images/uparrow.png"></a></div>
        <div id="headMoveDown"><a class="moveDownCls"><img src="images/downarrow.png"></a></div>
        <a href="javascript:toggle();"><div id="tabHeadText">Important Links »</div> </a>

    </div>
        <div id="toggleText" style="display:none; text-align:center;">
            <div id="empGuide" style="text-align:center;margin-left:auto; margin-right:auto;">

                CONTENT OF DIV

            </div>
        </div>
        <br />

</div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

神回复 2024-12-09 03:20:03

我会使用 JSON 表示您的布局,但请注意,cookie 只能保存 4K 数据。您最好将其存储在服务器上或使用本地存储。

I'd use a JSON representation of your layout, but beware, cookies can only hold 4K of data. You're best storing it on the server or using local storage.

静若繁花 2024-12-09 03:20:03

根据排列的数量,您可以在 jquery 代码中创建键->值对的哈希,其中每个值都是 div 的排序,键是您在 cookie 中存储的内容。

Depending on the number of permutations, you could create a hash of key->value pairs in your jquery code, where each value would be an ordering of the the divs, and the key would be what you store in the cookie.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文