好的，我正在构建一个产品分类手表，这是我到目前为止所做的。
jQuery(document).ready(function() {
// starter jQuery file
/* Watches Array */
var watchesArray = [
{
model: "Swim",
image:"",
price: 149.99,
sports:["Swimming"],
touchScreen:false,
GPS:false,
heartRateMonitor:false,
hrZoneTraining:false,
caloriesBurned:true,
distance:true,
pace:true,
multisport:false,
swimMetrics:true,
memory:"Up to 30 workouts",
virtualPartner:false,
virtualRacer:false,
paceAlert:false,
timeDistanceAlert:false,
hydrationAlert:false,
rechargeableBattery:false,
waterResistant:"Up to 50 meters",
syncWithComputer:true,
other:"",
},
{
model: "FR 10",
image:"fr_10.jpg",
price: 129.99,
sports:["Running"],
touchScreen:false,
GPS:true,
heartRateMonitor:false,
hrZoneTraining:false,
caloriesBurned:false,
distance:true,
pace:true,
multisport:false,
swimMetrics:false,
memory:"Up to 7 workouts",
virtualPartner:false,
virtualRacer:false,
paceAlert:false,
timeDistanceAlert:false,
hydrationAlert:false,
rechargeableBattery:true,
waterResistant:"Up to 50 meters",
syncWithComputer:false,
other:"-Virtual Pacer(compares running pace to target)</br>-Walk/Run feature",
checkBox:"<input type='checkbox' name='he' value='jk' id='compare'>"
},
{
model: "FR 15",
image:"fr_15.jpg",
price: 199.99,
sports:["Running"],
touchScreen:false,
GPS:true,
heartRateMonitor:true,
hrZoneTraining:true,
caloriesBurned:true,
distance:true,
pace:true,
multisport:false,
swimMetrics:false,
memory:"Up to 7 workouts",
virtualPartner:false,
virtualRacer:false,
paceAlert:false,
timeDistanceAlert:false,
hydrationAlert:false,
rechargeableBattery:true,
waterResistant:"Up to 50 meters",
syncWithComputer:false,
other:"-Virtual Pacer (compares running pace to target) </br>Walk/Run feature</br>-Activity",
},
{
model: "FR 220",
image:"fr_220.jpg",
price: 299.99,
sports:["Running"],
touchScreen:false,
GPS:true,
heartRateMonitor:true,
hrZoneTraining:true,
caloriesBurned:true,
distance:true,
pace:true,
multisport:false,
swimMetrics:false,
memory:"200 hours of data",
virtualPartner:false,
virtualRacer:false,
paceAlert:true,
timeDistanceAlert:false,
hydrationAlert:true,
rechargeableBattery:true,
waterResistant:"Up to 50 meters",
syncWithComputer:true,
other:"-Walk/Run feature</br>-Interval Training",
},
{
model: "FR 620",
image:"fr_620.jpg",
price: 449.99,
sports:["Running"],
touchScreen:true,
GPS:true,
heartRateMonitor:true,
hrZoneTraining:true,
caloriesBurned:true,
distance:true,
pace:true,
multisport:false,
swimMetrics:false,
memory:"200 hours of data",
virtualPartner:true,
virtualRacer:false,
paceAlert:true,
timeDistanceAlert:true,
hydrationAlert:true,
rechargeableBattery:true,
waterResistant:"Up to 50 meters",
syncWithComputer:true,
other:"-VO2 Max</div></br>-Walk/Run feature</br>-Interval Training",
},
{
model: "FR 310 XT",
image:"",
price: 349.99,
sports:["Multisport"],
touchScreen:false,
GPS:true,
heartRateMonitor:true,
hrZoneTraining:true,
caloriesBurned:true,
distance:true,
pace:true,
multisport:true,
swimMetrics:false,
memory:"1000 laps",
virtualPartner:true,
virtualRacer:true,
paceAlert:true,
timeDistanceAlert:true,
hydrationAlert:true,
rechargeableBattery:true,
waterResistant:"Up to 50 meters",
syncWithComputer:true,
other:"-Interval Training",
},
{
model: "FR70",
image:"",
price: 149.99,
sports:["Fitness"],
touchScreen:false,
GPS:false,
heartRateMonitor:true,
hrZoneTraining:true,
caloriesBurned:true,
distance:true,
pace:true,
multisport:false,
swimMetrics:false,
memory:"Up to 20 hrs of data",
virtualPartner:true,
virtualRacer:false,
paceAlert:true,
timeDistanceAlert:true,
hydrationAlert:false,
rechargeableBattery:false,
waterResistant:"Up to 50 meters",
syncWithComputer:true,
other:"-Interval Training",
},
];
/* End Watch Array */
/* different sports arrays filtered */
var runningArray = watchesArray.filter(function(watch) {
return watch.sports.indexOf('Running') !== -1;
});
var swimmingArray = watchesArray.filter(function(watch) {
return watch.sports.indexOf('Swimming') !== -1;
});
var multisportArray = watchesArray.filter(function(watch) {
return watch.sports.indexOf('Multisport') !== -1;
});
var fitnessArray = watchesArray.filter(function(watch) {
return watch.sports.indexOf('Fitness') !== -1;
});
function compare() {
if ($('#page-2 div:nth-of-type(1)').hasClass('running-category')) {
var sportArray = runningArray;
}
if ($('#page-2 div:nth-of-type(2)').hasClass('swimming-category')) {
var sportArray = swimmingArray;
}
if ($('#page-2 div:nth-of-type(3)').hasClass('multisport-category')) {
var sportArray = multisportArray;
}
if ($('#page-2 div:nth-of-type(4)').hasClass('fitness-category')) {
var sportArray = fitnessArray;
}
var sportArrayLength = $(sportArray).length;
for (var i = 0; i < sportArrayLength; i++) {
var watchModel = "<div class='watch-model'>"+sportArray[i].model+"</div>",
watchImage = "<div class='watch-image'>"+sportArray[i].image+"</div>",
watchPrice = "<div class='watch-price'>$"+sportArray[i].price+"</div>",
watchSports = "<div class='watch-sports'>"+sportArray[i].sports+"</div>",
watchTouch = "<div class='watch-touch'>"+sportArray[i].touchScreen+"</div>",
watchGPS = "<div class='watch-gps'>"+sportArray[i].GPS+"</div>",
watchHeart = "<div class='watch-heart'>"+sportArray[i].heartRateMonitor+"</div>",
watchHRZone = "<div class='watch-zone'>"+sportArray[i].hrZoneTraining+"</div>",
watchCalories = "<div class='watch-calories'>"+sportArray[i].caloriesBurned+"</div>",
watchDistance = "<div class='watch-distance'>"+sportArray[i].distance+"</div>",
watchPace = "<div class='watch-pace'>"+sportArray[i].pace+"</div>",
watchMultiSport = "<div class='watch-swim-metrics'>"+sportArray[i].multisport+"</div>",
watchSwimMetrics = "<div class='watch-multi'>"+sportArray[i].multisport+"</div>",
watchMemory = "<div class='watch-memory'>"+sportArray[i].memory+"</div>",
watchVirtualPartner = "<div class='watch-virtual-partner'>"+sportArray[i].virtualPartner+"</div>",
watchVirtualRacer = "<div class='watch-virtual-racer'>"+sportArray[i].virtualRacer+"</div>",
watchPaceAlert = "<div class='watch-pace-alert'>"+sportArray[i].paceAlert+"</div>",
watchTimeDistanceAlert = "<div class='watch-time-distance-alert'>"+sportArray[i].timeDistanceAlert+"</div>",
watchHydrationAlert = "<div class='watch-hydration'>"+sportArray[i].hydrationAlert+"</div>",
watchRechargeable = "<div class='watch-rechargeable'>"+sportArray[i].rechargeableBattery+"</div>",
watchWaterResistance = "<div class='watch-water-resistance'>"+sportArray[i].waterResistant+"</div>",
watchSync = "<div class='watch-syncs'>"+sportArray[i].syncWithComputer+"</div>",
watchOther = "<div class='watch-other'>"+sportArray[i].other+"</div>",
watchesTotal ="<div class='item-container'>"+ watchModel + watchImage + watchPrice + watchSports + watchTouch + watchGPS + watchHeart + watchHRZone + watchCalories + watchDistance + watchPace + watchMultiSport + watchSwimMetrics + watchMemory + watchVirtualPartner + watchVirtualRacer + watchPaceAlert + watchTimeDistanceAlert + watchHydrationAlert + watchRechargeable + watchWaterResistance + watchSync + watchOther+"</div>"
;
$('.comparison-container').append(watchesTotal);
// alert(watchModel)
}
} //end function
$("#page-4 .continue-button").click(function() {
$('.comparison-container').empty();
compare();
});
//var inArray = $.inArray(true, watchesArray[0].multisport)
// alert(inArray)
}); // ready method
因此，流程基本上是点击一项运动，过滤数组并使用那些具有该项运动的项目制作新阵列，然后选择您拥有的som功能，并在点击时继续那些符合条件的项目是显示。
对于最后一部分，我被困住的地方是，当显示这些手表时，我必须能够选择那些我感兴趣的产品的复选框，以便我可以继续并让所选择的手表显示所有他们的细节。所以基本上我需要弄清楚如何通过从页面中选择我想要的对象来比较数组中的两个对象。
在第3页上，你基本上有一个数组项目列表和每个数据项目下的比较复选框。我只需要能够将那些被选中的产品传递给下一页
答案 0 :(得分：-2)
如何比较数组中的两个对象
使用JSON.stringify来比较文字：
var foo = [{"1":2},{"1":3},{"2":3},{"1":2}];
var bar = JSON.stringify(foo[0]) === JSON.stringify(foo[1]);
var baz = JSON.stringify(foo[0]) === JSON.stringify(foo[3]);
使用数组作为第二个参数来保证密钥枚举的排序：
(JSON.stringify({a: 1, b: 2}, ["a","b"]) === JSON.stringify({b: 2, a: 1}, ["a","b"]))