在第1页，我有一个导航链接，调用ajax并列出该类别中的所有项目组合项目
导航链接如下所示：
<nav class="pos-relative filter filter-underline">
<a href="javascript:void(0)" class="all ajax" data-object="portfolio" data-view="list-grid-textbelow" data-section="project-list" data-category-id="*" data-limit="50" data-noresult-message="No more result found.">
All</a>
<div class="loading" style="display: none;"></div>
<a href="#arhitecture" class="ajax active" id="cat-filter-arhitecture" data-object="portfolio" data-view="list-grid-textbelow" data-section="project-list" data-category-id="16" data-limit="50" data-noresult-message="No more result found.">
Arhitecture</a>
<div class="loading"></div>
<a href="#design" class="ajax" id="cat-filter-design" data-object="portfolio" data-view="list-grid-textbelow" data-section="project-list" data-category-id="19" data-limit="50" data-noresult-message="No more result found.">
Design</a>
<div class="loading"></div>
</nav>
Js用于此：
/* ========================================================================
* DOM-based Routing
* Based on http://goo.gl/EUTi53 by Paul Irish
*
* Only fires on body classes that match. If a body class contains a dash,
* replace the dash with an underscore when adding it to the object below.
*
* .noConflict()
* The routing is enclosed within an anonymous function so that you can
* always reference jQuery with $, even when in .noConflict() mode.
*
* Google CDN, Latest jQuery
* To use the default WordPress version of jQuery, go to lib/config.php and
* remove or comment out: add_theme_support('jquery-cdn');
* ======================================================================== */
(function($) {
"use strict";
// Projects list view (Portfolio)
var project_list = function () {
// if found #hash in URL,
// get ID of category, and in found cat_id, than, ajax start
},
// Use this variable to set up the common and page specific functions. If you
// rename this variable, you will also need to rename the namespace below.
Roots = {
// All pages
common: {
init: function() {
// JavaScript to be fired on all pages
// ajax event
$('a.ajax').click( function(e) {
e.preventDefault();
var $linkAjaxClicked = $(this), $navLinkAjaxClicked;
// navigation of filter links
$navLinkAjaxClicked = $linkAjaxClicked.parent('nav').length ? $linkAjaxClicked.parent('nav') : $linkAjaxClicked.parent().parent('nav');
if (typeof $linkAjaxClicked.data('section') === 'undefined' ||
typeof $linkAjaxClicked.data('object') === 'undefined' ||
typeof $linkAjaxClicked.data('limit') === 'undefined') {
console.log('AJAX ERROR: Missing some required data. Required HTML5 data-* attributes are: "data-section", "data-object" and "data-limit".');
return false;
}
var $parentSection = $('section.' + $linkAjaxClicked.data('section')), // parent <section> class name
$answerContainer = $('#' + $linkAjaxClicked.data('object') + '-ajax-data'), // answer data container ID
ajaxData = window[ $linkAjaxClicked.data('object') ], // ajax WP config data object
view = typeof $linkAjaxClicked.data('view') !== 'undefined' ? $linkAjaxClicked.data('view') : 0, // view of file e.g. portfolio-"LIST-GRID".php
reponse_action = typeof $linkAjaxClicked.data('adding') !== 'undefined' ?
$linkAjaxClicked.data('adding') :
'replace', // append | replace
data2send = {}, $item, limit = $linkAjaxClicked.data('limit'),
offset = typeof $linkAjaxClicked.data('offset') !== 'undefined' ? $linkAjaxClicked.data('offset') : 0,
categoryId = typeof $linkAjaxClicked.data('category-id') !== 'undefined' ?
$linkAjaxClicked.data('category-id') :
'*',
$btnMore = $parentSection.find('.btn-more'), $btnLoading = $btnMore.next('.loading'),
$containerLoading = $('<div class="loading"></div>'), $filterLoading = $parentSection.find('.filter .loading').first(),
noResultMessage = typeof $linkAjaxClicked.data('noresult-message') !== 'undefined' ?
$linkAjaxClicked.data('noresult-message') :
'No more result found.',
offsetSource = typeof $linkAjaxClicked.data('offset-source') !== 'undefined' ?
$linkAjaxClicked.data('offset-source') :
false;
// set category ID on "load more" button
$parentSection.find('.btn-more').data('category-id', categoryId);
// select "active" filter navigation link
if ( $navLinkAjaxClicked.length ) {
$navLinkAjaxClicked.find('.ajax').removeClass('active');
$linkAjaxClicked.addClass('active');
}
// loading effect
//$linkAjaxClicked.append('<i class="icon-spinner animate-spin"></i>');
$btnLoading.show();
$filterLoading.show();
if ( reponse_action === 'replace' ) { // only when we replace content, this content is blocked during AJAX loading
$containerLoading.appendTo($answerContainer).fadeIn();
}
if (offsetSource === 'item') {
$item = $answerContainer.find('.item');
offset = $item.length;
}
// data sending by ajax
data2send = {
action: ajaxData.action,
view: view,
limit: limit,
offset: offset,
nonce: ajaxData.nonce,
catid: categoryId,
pagination: false
};
// ajax start
$.ajax({
type: 'POST',
url: ajaxData.url,
data: data2send,
complete: function () {
// turn off loader effect
$linkAjaxClicked.find('.icon-spinner').remove();
$btnLoading.hide();
$filterLoading.hide();
$containerLoading.hide();
},
success: function ( response ) {
if ( response === '' ) { // empty response
var extracss = $answerContainer.hasClass('masonry') ? 'item' : 'hide-item';
response = '<div class="col-xs-12 '+extracss+'">';
response += ' <div class="text-center text-upper alert alert-info">'+noResultMessage+'</div>';
response += '</div>';
}
var $response = $(response);
if ( reponse_action === 'replace') { // default action
$answerContainer
.html( $response )
.find('.hide-item').fadeIn('normal');
} else if ( reponse_action === 'append') {
$answerContainer
.append( $response )
.find('.hide-item').fadeIn('slow');
}
if ( response !== '' ) {
// animate.css
animate.setDelay( $('.animated') ); // again setted .animated elements, because it is new elements generated by AJAX
animate.start( animate.itemsInside($answerContainer) );
// set Magnific Popup [http://dimsemenov.com/plugins/magnific-popup/]
// definition of "setMagnificPopup" function is on the top of main.js file
$answerContainer.find('.magnific-gallery').each(setMagnificPopup);
// jQuery panr [https://github.com/robbue/jquery.panr]
// definition of "configPanr" object is on the top of main.js file
var $wppostimage = $('.no-touch .wp-post-image');
if (typeof $wppostimage.panr === 'function' && $wppostimage.length) {
$wppostimage.panr(configPanr);
}
// WordPress-Post-Like-System [https://github.com/JonMasterson/WordPress-Post-Like-System]
// definition of "setLikeSystem" function is on the top of main.js file
$answerContainer.find('.jm-post-like').click(setLikeSystem);
// Masonry [http://masonry.desandro.com/]
if ( $answerContainer.hasClass('masonry') ) {
if ( reponse_action === 'replace') { // default action
$answerContainer
.masonry('destroy')
.imagesLoaded( function() {
$answerContainer.masonry({
itemSelector: '.item'
});
});
} else if ( reponse_action === 'append') {
$answerContainer
.imagesLoaded( function() {
$answerContainer.masonry('appended', $response);
});
}
}
// Owl Carousel 2 [http://www.owlcarousel.owlgraphic.com/]
// definition of "setOwlCarousel" function is on the top of main.js file
else if ( $answerContainer.hasClass('owl-carousel') ) {
$answerContainer.trigger('destroy.owl.carousel');
$answerContainer.each(setOwlCarousel);
}
}
}
});
});
}
},
// Home page
home: {
init: function() {
// JavaScript to be fired on the home page
}
},
// Portfolio: Project List
page_template_list_fullscr_portfolio_php: {
init: project_list
},
// Portfolio: Project List
page_template_list_grid_portfolio_php: {
init: project_list
},
};
// The routing fires all common scripts, followed by the page specific scripts.
// Add additional events for more control over timing e.g. a finalize event
var UTIL = {
fire: function(func, funcname, args) {
var namespace = Roots;
funcname = (funcname === undefined) ? 'init' : funcname;
if (func !== '' && namespace[func] && typeof namespace[func][funcname] === 'function') {
namespace[func][funcname](args);
}
},
loadEvents: function() {
UTIL.fire('common');
$.each(document.body.className.replace(/-/g, '_').split(/\s+/),function(i,classnm) {
UTIL.fire(classnm);
});
}
};
$(document).ready(UTIL.loadEvents);
})(jQuery); // Fully reference jQuery after this point.
现在我想在第2页上建立一个链接，这将带我到第1页并调用ajax并显示所需的类别（假设设计）。
我尝试插入一个href并将其链接到http://somesite/page1/#design但是当然它不起作用。它加载第1页但不调用ajax。该链接可以包含哪些内容？
答案 0 :(得分：1)
因此，您要从第2页重定向到第1页，然后您想要显示所需的类别#design。这是你可以做的。
在您的第2页上click on the link将您带到第1页，就在下面的ajax调用set the category link in a localstorage 之前。
localStorage.setItem("categoryLink", '#design '); // here #design is hardcoded but you have to make it dynamic.
然后您可以在第1页文档准备脚本中添加它。
$(function(){
var categoryHref = localStorage.getItem("categoryLink") // get the value from storage
if(categoryHref ){ // if the value exists
$('a[href="'+categoryHref +'"]').trigger('click');
localStorage.removeItem("categoryLink"); // remove it after first use
}
});
所以我的想法是找到带有Href #design的锚标签并触发点击，这会自动调用你已经拥有的ajax
编辑1：，因为您询问了如何动态设置本地存储值，这是我的答案。
我假设您有一个锚标记，您将其称为链接，并将用户带到另一个页面。
<a href='someURL' data-target-category='#design'>Click Me</a>
维护这样的data-属性，该属性将保存类别href值。现在点击此链接我们需要保存到本地存储，如下面
$('a').on('click',function(){ //change the selectors according to your HTML
localStorage.setItem("categoryLink", $(this).data('target-category')); // dynamic assignment
});