Question

在我的网页上，访问者可以通过＆＃34;相关性＆＃34;对菜单进行排序。或者＆＃34;日期＆＃34;。但是，当一个人选择＆＃34;相关性＆＃34;并加载一个新页面，选择回到＆＃34; date＆＃34;。据我所知，如果没有cookies，就无法解决这个问题！？所以我上传了＆＃34; jquery-1.11.3.min.js＆＃34;和＆＃34; jquery.cookie.js＆＃34;到我的页面。

我现在可以开始激活按钮的Cookie了吗？如何保存cookie以便在刷新后保留选项？由于＆＃39; date＆＃39;是默认选项我实际上只需要在人们选择“相关性”时保存cookie。什么是达到我的目标的代码？

以下是我用于菜单的代码：

＆＃13;

/** 
 * Hier beginnt im JSFiddle der JavaScript Bereich
 *
 * @param sortCriteria
 *   Name of the data-attribute for sorting.
 * @param itemsToSort
 *   A string selector for items for sorting.
 * @param container
 *   A container to put items.
 * @returns {Function}
 */
var sortByDataAttr = function (sortCriteria, itemsToSort, container) {
    return function () {

        // Grab all the items for sorting.
        var $collection = $(itemsToSort);

        // Sort them and append in to container.
        $collection.sort(function (a, b) {
            return $(b).data(sortCriteria) - $(a).data(sortCriteria)
        }).appendTo($(container));
    };
},


/**
 * Remove class from all elements and apply to current.
 *
 * @param current
 *   HTML node to apply class.
 * @param activeClass
 *   Active-state string class.
 */
highlightActive = function (current, activeClass) {
    $('.' + activeClass).removeClass(activeClass);
    $(current).addClass(activeClass);
};

// Sort by 'data-date' at the start.
highlightActive('.btn-sort-date', 'btn-sort--active');
sortByDataAttr('date', '.item', '.list');

$('.btn-sort-date').on('click', function () {
    highlightActive(this, 'btn-sort--active');
    sortByDataAttr('date', '.item', '.list')();
});

$('.btn-sort-relevance').on('click', function () {
    highlightActive(this, 'btn-sort--active');
    sortByDataAttr('relevance', '.item', '.list')();
});
// Hier endet im JSFiddle der JavaScript Bereich

＆＃13;

<!-- Im JSFiddle startet der html Bereich hier -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside id="nav_menu-5" class="widget-1 widget-first widget-odd widget widget_nav_menu">
    <div class="menu-projects-container">
        <ul id="menu-projects" class="menu">

<div style="color:#A4A4A4" class="daterel"> 
<span class="btn btn-sort-date"><i>date</i></span>
<span>|</span>

                <span class="btn btn-sort-relevance"><i>relevance</i></span>
</div>

            <div class="projects">


<b>PROJECTS</b>

           
            </div>
            <div class="list">
                     <li id="menu-item-649" class="item" data-relevance="11" data-date="2015.6"><a href="http://thomasmedicus.at/brickstone-blues/">brickstone blues</a>
<span style="color:#A4A4A4">video</span>
                         
                <li id="menu-item-649" class="item" data-relevance="7" data-date="2015.5"><a href="http://thomasmedicus.at/copypaste/">copy&#038;paste</a>
<span style="color:#A4A4A4">installation</span>

                    <li id="menu-item-649" class="item" data-relevance="6" data-date="2015.4"><a href="http://thomasmedicus.at/zebral-fluids/">zebral fluids</a>
<span style="color:#A4A4A4">gif</span>

                        <li id="menu-item-649" class="item" data-relevance="8" data-date="2015.3"><a href="http://thomasmedicus.at/fried-egg-variation/">fried egg variation</a>
<span style="color:#A4A4A4">glass</span>

                        </li>
                        <li id="menu-item-649" class="item" data-relevance="8" data-date="2015.2"><a href="http://thomasmedicus.at/bearrr/">bearrr&#8230;</a>
<span style="color:#A4A4A4">illustration</span>

                        </li>
                        <li id="menu-item-649" class="item" data-relevance="7" data-date="2015.1"><a href="http://thomasmedicus.at/glass-ribbon/">glass ribbon</a>
<span style="color:#A4A4A4">glass</span>

                        </li>
                        <li id="menu-item-649" class="item" data-relevance="13" data-date="2014.5"><a href="http://thomasmedicus.at/emulsifier/">emulsifier</a>
<span style="color:#A4A4A4">sculpture</span>

                        </li>
                        <li id="menu-item-649" class="item" data-relevance="9" data-date="2014.4"><a href="http://thomasmedicus.at/black-holes/">black holes</a>
<span style="color:#A4A4A4">illustration</span>

                        </li>
                        <li id="menu-item-649" class="item" data-relevance="7" data-date="2014.3"><a href="http://thomasmedicus.at/this/">**** this!</a>
<span style="color:#A4A4A4">concept</span>

                        </li>
                        <li id="menu-item-649" class="item" data-relevance="10" data-date="2014.2"><a href="http://thomasmedicus.at/heads/">heads</a>
<span style="color:#A4A4A4">mask</span>

                        </li>
                        <li id="menu-item-649" class="item" data-relevance="5" data-date="2014.1"><a href="http://thomasmedicus.at/staining-glass/">staining glass</a>
<span style="color:#A4A4A4">glass</span>

                        </li>
                        <li id="menu-item-649" class="item" data-relevance="11" data-date="2013.2"><a href="http://thomasmedicus.at/fishbird/">fish&#038;bird</a>
<span style="color:#A4A4A4">flipbook</span>

                        </li>
                        <li id="menu-item-649" class="item" data-relevance="6" data-date="2013.1"><a href="http://thomasmedicus.at/faces/">faces</a>
<span style="color:#A4A4A4">sculpture</span>

                        </li>
            </div>
<!-- Im JSFiddle geht der html Bereich bis hier -->

＆＃13;

感谢您的支持！

Answer 1

如果您想使用Cookie，则应在Upi┼íi svoj tekst:之后添加以下内容：

sortByDataAttr('relevance', '.item', '.list')();

这就是你javascript的开头：

$.cookie('sortby', 'relevance', {expires:30});

它会查找名为“sortby”的cookie，如果值为“related”，则会相应地对列表进行排序。

Answer 2

使用HTML5 localStorage应如下所示：

$(document).ready(function(){

    $('.btn-sort-date').on("click", function(){
        localStorage.setItem("selected_item", "date");
    });

    $('.btn-sort-relevance').on("click", function(){
        localStorage.setItem("selected_item", "relevance");
    });

    var selected_item = localStorage.getItem("selected_item");

    if (selected_item) {
         sortByDataAttr(selected_item, '.item', '.list');
    }

});

在页面末尾运行..

希望它有所帮助。

Answer 3

你需要这样做：

添加Cookie

$('.btn-sort-date').on('click', function () {
    highlightActive(this, 'btn-sort--active');
    sortByDataAttr('date', '.item', '.list')();
    $.cookie('sort','date');
});

$('.btn-sort-relevance').on('click', function () {
    highlightActive(this, 'btn-sort--active');
    sortByDataAttr('relevance', '.item', '.list')();
    $.cookie('sort','relevance');
});

并在页面加载时检查Cookie

if (typeof $.cookie('sort') == 'undefined'){
    $.cookie('sort','date');
    highlightActive('.btn-sort-date', 'btn-sort--active');
    sortByDataAttr('date', '.item', '.list');
}
else{
    var sort=$.cookie('sort');
    highlightActive('.btn-sort-'+sort, 'btn-sort--active');
    sortByDataAttr(sort, '.item', '.list');
}

所以你的最终代码是

/** 
 * Hier beginnt im JSFiddle der JavaScript Bereich
 *
 * @param sortCriteria
 *   Name of the data-attribute for sorting.
 * @param itemsToSort
 *   A string selector for items for sorting.
 * @param container
 *   A container to put items.
 * @returns {Function}
 */
var sortByDataAttr = function (sortCriteria, itemsToSort, container) {
    return function () {

        // Grab all the items for sorting.
        var $collection = $(itemsToSort);

        // Sort them and append in to container.
        $collection.sort(function (a, b) {
            return $(b).data(sortCriteria) - $(a).data(sortCriteria)
        }).appendTo($(container));
    };
},


/**
 * Remove class from all elements and apply to current.
 *
 * @param current
 *   HTML node to apply class.
 * @param activeClass
 *   Active-state string class.
 */
highlightActive = function (current, activeClass) {
    $('.' + activeClass).removeClass(activeClass);
    $(current).addClass(activeClass);
};

if (typeof $.cookie('sort') === 'undefined'){
    $.cookie('sort','date');
    highlightActive('.btn-sort-date', 'btn-sort--active');
    sortByDataAttr('date', '.item', '.list');
}
else{
    var sort=$.cookie('sort');
    highlightActive('.btn-sort-'+sort, 'btn-sort--active');
    sortByDataAttr(sort, '.item', '.list');
}

$('.btn-sort-date').on('click', function () {
    highlightActive(this, 'btn-sort--active');
    sortByDataAttr('date', '.item', '.list')();
    $.cookie('sort','date');
});

$('.btn-sort-relevance').on('click', function () {
    highlightActive(this, 'btn-sort--active');
    sortByDataAttr('relevance', '.item', '.list')();
    $.cookie('sort','relevance');
});

// Hier endet im JSFiddle der JavaScript Bereich

<强>更新

更改了定义函数的方式，并按预期工作： DEMO

/** 
 * Hier beginnt im JSFiddle der JavaScript Bereich
 *
 * @param sortCriteria
 *   Name of the data-attribute for sorting.
 * @param itemsToSort
 *   A string selector for items for sorting.
 * @param container
 *   A container to put items.
 * @returns {Function}
 */
function sortByDataAttr(sortCriteria, itemsToSort, container) {
        alert('inside');

        // Grab all the items for sorting.
        var $collection = $(itemsToSort);

        // Sort them and append in to container.
        $collection.sort(function (a, b) {
            return $(b).data(sortCriteria) - $(a).data(sortCriteria)
        }).appendTo($(container));
};


/**
 * Remove class from all elements and apply to current.
 *
 * @param current
 *   HTML node to apply class.
 * @param activeClass
 *   Active-state string class.
 */
function highlightActive(current, activeClass) {
    $('.' + activeClass).removeClass(activeClass);
    $(current).addClass(activeClass);
};

if (typeof $.cookie('sort') === 'undefined'){
    alert($.cookie('sort'));
    $.cookie('sort','date');
    highlightActive('.btn-sort-date', 'btn-sort--active');
    sortByDataAttr('date', '.item', '.list');
}
else{
    alert($.cookie('sort'));
    var sort=$.cookie('sort');
    highlightActive('.btn-sort-'+sort, 'btn-sort--active');
    sortByDataAttr(sort, '.item', '.list');
}

$('.btn-sort-date').on('click', function () {
    highlightActive(this, 'btn-sort--active');
    sortByDataAttr('date', '.item', '.list')();
    $.cookie('sort','date');
});

$('.btn-sort-relevance').on('click', function () {
    highlightActive(this, 'btn-sort--active');
    sortByDataAttr('relevance', '.item', '.list')();
    $.cookie('sort','relevance');
});

// Hier endet im JSFiddle der JavaScript Bereich

带有cookie的jquery按钮，以便在刷新后记住菜单设置

3 个答案: