panel.html上的一系列按钮，选择 pickOne 这三个选项中的数据，从而对他们想要购买的礼品做出一系列选择， pickTwo 和 pickThree 保存在查询字符串中，并传递给gifts.html document.ready或window.onload上，查询中的值
字符串被连接并传递给isotope.js过滤器，该过滤器进行排序
基于查询的页面上的礼物pickThree="" document.ready或{。}上的结果
window.onload // Pass choices to query string
var pickOne = null;
var pickTwo = null;
var pickThree = null;
$(".btn--next").on("click", function(){
// Progress bar circles
var circleOneSelected = $(".circle--one").hasClass("is-selected");
var circleTwoSelected = $(".circle--two").hasClass("is-selected");
var circleThreeSelected = $(".circle--three").hasClass("is-selected");
// Panel One options
var giftsforHimSelected = $(".btn--option-him").hasClass("is-selected");
var giftsforHerSelected = $(".btn--option-her").hasClass("is-selected");
var giftsforKidsSelected = $(".btn--option-kids").hasClass("is-selected");
var giftsforAnyoneSelected = $(".btn--option-anyone").hasClass("is-selected");
// Panel Two options
var typeHimJewelry = $(".btn--option-him-jewelry").hasClass("is-selected");
var typeHimScarves = $(".btn--option-him-scarves").hasClass("is-selected");
var typeHimFishing = $(".btn--option-him-fishing").hasClass("is-selected");
var typeHimCologne = $(".btn--option-him-cologne").hasClass("is-selected");
var typeHimShirts = $(".btn--option-him-shirts").hasClass("is-selected");
var typeHimSports = $(".btn--option-him-sports").hasClass("is-selected");
var typeHerCashmere = $(".btn--option-her-cashmere").hasClass("is-selected");
var typeHerPerfume = $(".btn--option-her-perfume").hasClass("is-selected");
var typeHerScarves = $(".btn--option-her-scarves").hasClass("is-selected");
var typeHerSweaters = $(".btn--option-her-sweaters").hasClass("is-selected");
var typeHerBeauty = $(".btn--option-her-beauty").hasClass("is-selected");
var typeHerCandles = $(".btn--option-her-candles").hasClass("is-selected");
var typeHerNecklaces = $(".btn--option-her-necklaces").hasClass("is-selected");
var typeHerJewelry = $(".btn--option-her-jewelry").hasClass("is-selected");
var typeHerWatches = $(".btn--option-her-watches").hasClass("is-selected");
var typeHerBags = $(".btn--option-her-bags").hasClass("is-selected");
var typeHerShoes = $(".btn--option-her-shoes").hasClass("is-selected");
var typeHerOther = $(".btn--option-her-other").hasClass("is-selected");
var typeAnyoneCookbooks = $(".btn--option-anyone-cookbooks").hasClass("is-selected");
var typeAnyoneSpirits = $(".btn--option-anyone-spirits").hasClass("is-selected");
var typeAnyoneSuitcases = $(".btn--option-anyone-suitcases").hasClass("is-selected");
var typeAnyoneFood = $(".btn--option-anyone-food").hasClass("is-selected");
var typeAnyoneGardening = $(".btn--option-anyone-gardening").hasClass("is-selected");
var typeAnyoneGadgets = $(".btn--option-anyone-gadgets").hasClass("is-selected");
var typeAnyoneStLouis = $(".btn--option-anyone-stlouis").hasClass("is-selected");
var typeAnyoneGiveBack = $(".btn--option-anyone-giveback").hasClass("is-selected");
var typeAnyoneFitness = $(".btn--option-anyone-fitness").hasClass("is-selected");
var typeAnyoneSubscriptions = $(".btn--option-anyone-subscriptions").hasClass("is-selected");
var typeAnyoneOrnaments = $(".btn--option-anyone-ornaments").hasClass("is-selected");
var typeAnyonePets = $(".btn--option-anyone-pets").hasClass("is-selected");
var typeAnyonePersonalized = $(".btn--option-anyone-other").hasClass("is-selected");
var typeAnyoneOther = $(".btn--option-anyone-other").hasClass("is-selected");
// Panel Three options
var under25 = $(".btn--option-25").hasClass("is-selected");
var under50 = $(".btn--option-50").hasClass("is-selected");
var under75 = $(".btn--option-75").hasClass("is-selected");
var under100 = $(".btn--option-100").hasClass("is-selected");
var under250 = $(".btn--option-u250").hasClass("is-selected");
var over250 = $(".btn--option-o250").hasClass("is-selected");
var btnLikeSelected = $(".btn--like").hasClass("is-selected");
var btnSpendSelected = $(".btn--spend").hasClass("is-selected");
// // Pass choices to query string
// var pickOne = "";
// var pickTwo = "";
// var pickThree = "";
var data = {
pickOne: pickOne,
pickTwo: pickTwo,
pickThree: pickThree
}
if (circleOneSelected) {
if (giftsforHimSelected) {
completeStepOne();
showPanelHim();
pickOne = ".GiftsForHim";
console.log(pickOne);
} else if (giftsforHerSelected) {
completeStepOne();
showPanelHer();
pickOne = ".GiftsForHer";
console.log(pickOne);
} else if (giftsforKidsSelected) {
completeStepsOneTwo();
showPanelThree();
pickOne = ".GiftsForKids";
console.log(pickOne);
} else if (giftsforAnyoneSelected) {
completeStepOne();
showPanelAnyone();
pickOne = ".GiftsForAnyone";
console.log(pickOne);
}
}
if (circleTwoSelected && btnLikeSelected) {
completeStepTwo();
showPanelThree();
// Gifts he might like
if (typeHimJewelry) {
pickTwo = ".Jewelry";
} else if (typeHimScarves) {
pickTwo = ".Scarves";
} else if (typeHimFishing) {
pickTwo = ".Fishing";
} else if (typeHimCologne) {
pickTwo = ".Cologne";
} else if (typeHimShirts) {
pickTwo = ".Shirts";
} else if (typeHimSports) {
pickTwo = ".Sports";
// Gifts she might like
} else if (typeHerCashmere) {
pickTwo = ".Cashmere";
} else if (typeHerPerfume) {
pickTwo = ".Perfume";
} else if (typeHerScarves) {
pickTwo = ".Scarves";
} else if (typeHerSweaters) {
pickTwo = ".Sweaters";
} else if (typeHerBeauty) {
pickTwo = ".Beauty";
} else if (typeHerCandles) {
pickTwo = ".Candles";
} else if (typeHerNecklaces) {
pickTwo = ".Necklaces";
} else if (typeHerJewelry) {
pickTwo = ".SportsJewelry";
} else if (typeHerWatches) {
pickTwo = ".Watches";
} else if (typeHerBags) {
pickTwo = ".SuitcasesBags";
} else if (typeHerShoes) {
pickTwo = ".Shoes";
} else if (typeHerOther) {
pickTwo = ".Other";
// Gifts they might like
} else if (typeAnyoneCookbooks) {
pickTwo = ".Cookbooks";
} else if (typeAnyoneSpirits) {
pickTwo = ".Spirits";
} else if (typeAnyoneSuitcases) {
pickTwo = ".Suitcases";
} else if (typeAnyoneFood) {
pickTwo = ".Food";
} else if (typeAnyoneGardening) {
pickTwo = ".Garden";
} else if (typeAnyoneGadgets) {
pickTwo = ".Gadgets";
} else if (typeAnyoneStLouis) {
pickTwo = ".StLouis";
} else if (typeAnyoneGiveBack) {
pickTwo = ".GiveBack";
} else if (typeAnyoneFitness) {
pickTwo = ".Fitness";
} else if (typeAnyoneSubscriptions) {
pickTwo = ".Subscription";
} else if (typeAnyoneOrnaments) {
pickTwo = ".Ornaments";
} else if (typeAnyonePets) {
pickTwo = ".Pets";
} else if (typeAnyonePersonalized) {
pickTwo = ".Personalized";
} else if (typeAnyoneOther) {
pickTwo = ".Other";
}
}
if (circleThreeSelected && btnSpendSelected) {
if (under25) {
var pickThree = ".Under25";
} else if (under50) {
var pickThree = ".Under50";
} else if (under75) {
var pickThree = ".Under75";
} else if (under100) {
var pickThree = ".Under100";
} else if (under250) {
var pickThree = ".Under250";
} else if (over250) {
var pickThree = ".Over250";
}
var query = jQuery.param(data);
window.open("http://staging.graphics.stltoday.com/apps/giftguide/gifts.html?"+query);
}
});
如果在panel.html上点击最后一个按钮或直接转到该网址，则应运行此脚本
<script>
$(function(){
// if (window.location.href.indexOf("?" && "pickOne=." && "pickTwo=." && "pickThree=.") !== -1) {
if (window.location.href.indexOf("?") !== -1) {
console.log(window.location.href);
function getParameterByName(name, url) {
if (!url) {
url = window.location.href;
}
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var paramOne = getParameterByName("pickOne");
var paramTwo = getParameterByName("pickTwo");
var paramThree = getParameterByName("pickThree");
var filter = paramOne+paramTwo+paramThree
console.log(filter);
var $grid = $('.gifts').isotope({
itemSelector: '.gift',
layoutMode: 'masonry',
getSortData: {
name: '.gift__name',
price: '.gift__price parseInt',
},
sortAscending: {
name: true,
price: true
}
});
$grid.isotope({ filter: filter });
// If your query returns zero results, then make another search
var filter = $('.gifts').filter(function () {
return this.style.display == 'none'
});
if (filter.length === 0) {
console.log("There are no results");
}
}
});
</script>
<!-- Panel Three -->
<div class="panel panel--three is-hidden">
<!-- <div class="advertising advertising--horizontal">
<img src="http://placehold.it/720x90">
</div> -->
<div class="panel__inner inner--spend">
<div class="panel__info">
<h2 class="panel__title">How much do you want to spend?</h2>
<h3 class="panel__instructions pick--one">Pick one of the options below</h3>
<!-- <h3 class="panel__instructions">Remember, it's the thought that counts</h3> -->
</div>
<div class="button__group">
<button class="btn btn--option btn--option-25 btn--spend">Under $25 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-50 btn--spend">Under $50 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-75 btn--spend">Under $75 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-100 btn--spend">Under $100 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-u250 btn--spend">Under $250 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-o250 btn--spend">$250 and over <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--three"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<a href="/gifts.html" class="link--three"><button class="btn btn--next next--three">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button></a>
</div>
</div> <!-- .panel__inner -->
</div> <!-- .panel .panel--three -->
答案 0 :(得分：1)
您正在使用var关键字创建新的pickThree实例，因此添加到数据的原始pickThree实例永远不会设置为值。您需要删除var关键字，如下所示：
if (under25) {
pickThree = ".Under25";
} else if (under50) {
pickThree = ".Under50";
} else if (under75) {
pickThree = ".Under75";
} else if (under100) {
pickThree = ".Under100";
} else if (under250) {
pickThree = ".Under250";
} else if (over250) {
pickThree = ".Over250";
}