0
我有一个JSON文件，我试图重新加载我的代码中的函数，但我似乎无法让它工作。单击页面中的项目后，它会显示项目内容等。在底部，我为每个项目都有一个类似的产品。我想要做的就是点击类似的产品图片重新加载页面，并在页面上显示正确的项目，但我似乎无法使它工作。非常感谢任何帮助或建议，谢谢！试图重新加载一个图像的功能
我下面提供了一个工作示例，请访问codepen链接：
http://codepen.io/tcarp/pen/aBPLqX
'use strict';
$.ajax({
dataType: "jsonp",
url: '',
success: function(json){
//check for window hash and display product category
var categoryHash = window.location.hash;
switch(categoryHash)
{
case '#tomatoes':
displayTomatoes();
break;
default:
displayAll();
break;
}
//display product category based on click
$("#tomatoes").click(function(event){
displayTomatoes();
event.preventDefault();
window.location.hash = '#tomatoes';
});
$("#displayall").click(function(event){
displayAll();
});
//display all products function
function displayAll() {
var categoryImage = '';
$.each(json, function (i, item) {
categoryImage += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">' + '<a href="#"' + 'class="showProduct"' + 'data-itempageurl="' + item.itemFullUPC + '"' + 'data-itemgmo="' + item.itemGMOFree + '"' + 'data-itembpa="' + item.itemBPAFree + '"' + 'data-itemgluten="' + item.itemGlutenFree + '"' + 'data-itemlowsodium="' + item.itemLowSodium + '"' + 'data-itemorganic="' + item.itemOrganic + '"' + 'data-itemimage="' + item.imageURL + '"' + 'data-itemname="' + item.itemName + '"' + 'data-itemoz="' + item.itemPackSize + '"' + 'data-itemdescription="' + item.itemDescription + '"' + 'data-itemupc="' + item.itemFullUPC + '">' + '<img class="img-responsive img-hover productImagesCategory" src="' + item.imageURL + '">' + '<h3>' + item.itemName + '</h3>' + '</a>' + '</div>';
});
$('#imagesCategoryProducts').hide().html(categoryImage).fadeIn('slow');
//show individual product function on click
$(".showProduct").click(function(event){
//hide all current products
$('#productCategories').hide();
//get passed data from other function
var clickedItemName = '<h1>' + $(this).data('itemname') + '</h1>';
var clickedItemUPC = $(this).data('itemupc');
var clickedItemOZ = $(this).data('itemoz')
var clickedItemDescription = '<p>' + $(this).data('itemdescription') + '</p>';
var clickedItemImage = '<img class="img-responsive img-rounded center-block" src="' + $(this).data('itemimage') + '">';
var clickedItemGluten = $(this).data('itemgluten');
var clickedItemBPA = $(this).data('itembpa');
var clickedItemGMO = $(this).data('itemgmo');
var clickedItemLowSodium = $(this).data('itemlowsodium');
var clickedItemOrganic = $(this).data('itemorganic');
var clickedItemPageURL = $(this).data('itempageurl');
//check if clicked data equals correct item
$.each(json, function (i, item) {
if (item.itemName === clickedItemName) {
clickedItemName
}
if (item.itemFullUPC === clickedItemUPC) {
clickedItemUPC
}
if (item.itemPackSize === clickedItemOZ) {
clickedItemOZ
}
if (item.itemDescription === clickedItemDescription) {
clickedItemDescription
}
if (item.imageURL === clickedItemImage) {
clickedItemImage
}
if (item.itemGlutenFree === clickedItemGluten) {
clickedItemGluten
}
if (item.itemBPAFree === clickedItemBPA) {
clickedItemBPA
}
if (item.itemGMOFree === clickedItemGMO) {
clickedItemGMO
}
if (item.itemOrganic === clickedItemOrganic) {
clickedItemOrganic
}
if (item.itemLowSodium === clickedItemLowSodium) {
clickedItemLowSodium
}
//assign window hash to each product
if (item.itemFullUPC === clickedItemPageURL) {
event.preventDefault();
clickedItemPageURL = clickedItemPageURL.replace(/\s/g, '');
window.location.hash = clickedItemPageURL;
}
});
//remove extra characters from UPC
var originalUPC = clickedItemUPC;
var strippedUPC = '<h2>' + originalUPC.slice(1, -1); + '</h2>';
//remove characters after slash from Pack Size
var originalPackSize = clickedItemOZ;
var strippedPackSize = '<h2>' + clickedItemOZ.substring(clickedItemOZ.lastIndexOf("/") + 1); + '</h2>';
//show individual product information
$('#productSocialShare').show();
$('#individualProduct').show();
$('#relatedProducts').show();
//append product information to appropriate DIV
$('#productTitle').html(clickedItemName);
$('#productUPC').html(strippedUPC);
$('#productOZ').html(strippedPackSize);
$('#productDescription').html(clickedItemDescription);
$('#productImage').html(clickedItemImage);
//check if gluten free is true and show image
if (clickedItemGluten == "Y") {
clickedItemGluten = '<img class="img-responsive img-rounded img-margin" src="http://www.cento.com/DEV/images/misc/gluten_free_test.jpg">';
$('#productGlutenFree').html(clickedItemGluten);
$('#productGlutenFree').show();
} else {
$('#productGlutenFree').hide();
}
//check if bpa free is true and show image
if (clickedItemBPA == "Y") {
clickedItemBPA = '<img class="img-responsive img-rounded img-margin" src="http://www.cento.com/DEV/images/misc/bpa_free_test.jpg">';
$('#productBPAFree').html(clickedItemBPA);
$('#productBPAFree').show();
} else {
$('#productBPAFree').hide();
}
//check if gmo free is true and show image
if (clickedItemGMO == "Y") {
clickedItemGMO = '<img class="img-responsive img-rounded img-margin" src="http://www.cento.com/DEV/images/misc/gmo_test.jpg">';
$('#productGMOFree').html(clickedItemGMO);
$('#productGMOFree').show();
} else {
$('#productGMOFree').hide();
}
//check if organic is true and show image
if (clickedItemOrganic == "Y") {
clickedItemOrganic = '<img class="img-responsive img-rounded img-margin" src="http://www.cento.com/DEV/images/misc/organic_test.jpg">';
$('#productOrganic').html(clickedItemOrganic);
$('#productOrganic').show();
} else {
$('#productOrganic').hide();
}
//check if low sodium is true and show image
if (clickedItemLowSodium == "Y") {
clickedItemLowSodium = '<img class="img-responsive img-rounded img-margin" src="http://www.cento.com/DEV/images/misc/low_sodium_test.jpg">';
$('#productLowSodium').html(clickedItemLowSodium);
$('#productLowSodium').show();
} else {
$('#productLowSodium').hide();
}
//show random recipe for each item
var url = 'http://www.cento.com/DEV/recipes.json';
$.getJSON(url, function(json) {
var randomRecipe = json[Math.floor(Math.random() * json.length)];
randomRecipe = '<div>' + '<a href="' + randomRecipe.recipePageURL + '">' + '<img class="img-responsive img-hover" src="' + randomRecipe.recipeImageCategoryURL + '">' + '</a>' + '<a href="' + randomRecipe.recipePageURL +'">' + '<h3 class="similarProductSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '</a>' + '</div>';
$('#featuredRecipe').append(randomRecipe);
});
//show similar product
var categoryItems = [];
$.each(json, function(i, item){
if(item.itemCommodity == '1120' && item.itemBrandLetter == "C") categoryItems.push(item);
if(item.itemCommodity == '2120' && item.itemBrandLetter == "C") categoryItems.push(item);
});
var similarProduct= '';
$.each(json, function(i,item){
similarProduct = categoryItems[Math.floor(Math.random()*categoryItems.length)];
similarProduct += '<div>' + '<a href="#" class="showProduct"' + '>' + '<img class="img-responsive img-hover similarProductImagesCategory" src="' + similarProduct.imageURL + '">' + '<h3 class="similarProductSubCategoryImgCaption">' + similarProduct.itemName + '</h3>' + '</a>' + '</div>';
});
$('#productSimilar').append(similarProduct);
});
closeNav();
}
}
});