在我的网页上,访问者可以按“相关性”或“日期”对菜单进行排序。 但是,当人们选择“相关性”并加载新页面时,选择将返回到“日期”。 据我所知,没有 cookie 是不可能解决这个问题的!?所以我上传了“jquery-1.11.3.min.js”和“jquery.cookie.js”到我的页面。
我现在可以开始为按钮激活 cookie 了吗? 如何保存 cookie,以便在刷新后保留该选项? 由于“日期”是默认选项,我实际上只需要在人们选择“相关性”时保存 cookie。 实现我的目标的代码是什么?
这是我用于菜单的代码:
/**
* 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
<!-- 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&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…</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&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 -->
感谢您的支持!
最佳答案
如果你想使用 cookie,你应该在 sortByDataAttr('relevance', '.item', '.list')();
之后添加:
$.cookie('sortby', 'relevance', {expires:30});
这是你 javascript 的开头:
$(document).ready(function() {
if ('relevance' == $.cookie('sortby')) {
sortByDataAttr('relevance', '.item', '.list')();
} else {
sortByDataAttr('date', '.item', '.list')();
}
});
它将查找名称为“sortby”的 cookie,如果值为“relevance”,它将相应地对列表进行排序。
关于javascript - 带有cookie的jquery按钮在刷新后记住菜单设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31454333/