尝试重新加载页面后点击类似的产品

Question

Im从JSON文件拉项目。我有一个名为“showProduct”的类，一旦点击它，它会执行一个函数并在页面上显示项目信息。我试图在稍后在我的代码中再次调用同样的函数。我需要使用新项目内容刷新页面。下面是我的代码，真的希望有人能帮助我，我不知道我做错了什么。我没有包括JSON，但我希望通过查看类和我的代码，有人会知道为什么它不会工作。

function openNav() { 
 
    document.getElementById("productsSideBar").style.width = "250px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("productsSideBar").style.width = "0"; 
 
} 
 

 
'use strict'; 
 
\t 
 
\t $.ajax({ 
 
    \t \t dataType: "jsonp", 
 
    \t \t url: '', 
 
    \t \t success: function(json){ 
 
\t \t 
 
\t //check for window hash and display appropriate product category \t 
 
\t \t var currentHash = window.location.hash; 
 
\t \t switch(currentHash) 
 
\t \t { 
 
\t \t \t case '#tomatoes': 
 
\t \t \t \t displayTomatoes(); 
 
\t \t \t \t break; 
 
\t \t \t default: 
 
\t \t \t  displayAll(); 
 
\t \t \t \t break; 
 
\t \t } 
 
      
 
      //display all products function 
 
\t \t function displayAll() { 
 
\t \t \t var categoryImage = ''; 
 
\t \t 
 
\t \t \t $.each(json, function (i, item) { 
 
\t \t \t \t if (item.itemBrandLetter == "C") { 
 
\t \t \t \t \t \t categoryImage += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">' + '<a href="#"' + 'class="showProduct"' + 'data-itempageurl="' + item.itemName + '"' + 'data-itemgmo="' + item.itemGMOFree + '"' + 'data-itembpa="' + item.itemBPAFree + '"' + 'data-itemgluten="' + item.itemGlutenFree + '"' + '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>'; 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t $('#imagesCategoryProducts').hide().html(categoryImage).fadeIn('slow'); 
 
\t \t \t 
 
\t \t \t //show individual product function on click 
 
\t \t \t $(".showProduct").click(function(event){ 
 
    
 
    \t \t \t \t //hide all current products 
 
\t \t \t \t $('#productCategories').hide(); 
 
\t 
 
\t \t \t \t //get passed data from other function 
 
\t \t \t \t var clickedItemName = '<h1>' + $(this).data('itemname') + '</h1>'; 
 
\t \t \t \t var clickedItemUPC = $(this).data('itemupc'); 
 
\t \t \t \t var clickedItemOZ = '<h2>' + $(this).data('itemoz') + '</h2>'; 
 
\t \t \t \t var clickedItemDescription = '<p>' + $(this).data('itemdescription') + '</p>'; 
 
\t \t \t \t var clickedItemImage = '<img class="img-responsive img-rounded center-block" src="' + $(this).data('itemimage') + '">'; 
 
\t \t \t \t var clickedItemGluten = $(this).data('itemgluten'); 
 
\t \t \t \t var clickedItemBPA = $(this).data('itembpa'); 
 
\t \t \t \t var clickedItemGMO = $(this).data('itemgmo'); 
 
\t \t \t \t var clickedItemPageURL = $(this).data('itempageurl'); 
 
\t \t \t \t 
 
\t \t \t \t //check if clicked data equals correct item 
 
\t \t \t \t $.each(json, function (i, item) { 
 
\t \t \t \t if (item.itemName === clickedItemName) { 
 
\t \t \t \t \t clickedItemName 
 
\t \t \t \t } 
 
\t \t \t \t if (item.itemFullUPC === clickedItemUPC) { 
 
\t \t \t \t \t clickedItemUPC 
 
\t \t \t \t } 
 
\t \t \t \t if (item.itemPackSize === clickedItemOZ) { 
 
\t \t \t \t \t clickedItemOZ 
 
\t \t \t \t } 
 
\t \t \t \t if (item.itemDescription === clickedItemDescription) { 
 
\t \t \t \t \t clickedItemDescription 
 
\t \t \t \t } 
 
\t \t \t \t if (item.imageURL === clickedItemImage) { 
 
\t \t \t \t \t clickedItemImage 
 
\t \t \t \t } 
 
\t \t \t \t if (item.itemGlutenFree === clickedItemGluten) { 
 
\t \t \t \t \t clickedItemGluten 
 
\t \t \t \t } 
 
\t \t \t \t if (item.itemBPAFree === clickedItemBPA) { 
 
\t \t \t \t \t clickedItemBPA 
 
\t \t \t \t } 
 
\t \t \t \t if (item.itemGMOFree === clickedItemGMO) { 
 
\t \t \t \t \t clickedItemGMO 
 
\t \t \t \t } 
 
\t \t \t \t  
 
\t \t \t \t //assign window hash to each product 
 
\t \t \t \t if (item.itemName === clickedItemPageURL) { 
 
\t \t \t \t \t event.preventDefault(); 
 
\t \t \t \t \t clickedItemPageURL = clickedItemPageURL.replace(/\s/g, ''); 
 
\t \t \t \t \t window.location.hash = clickedItemPageURL; 
 
\t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t \t 
 
\t \t \t \t //remove extra characters from UPC 
 
\t \t \t \t var originalUPC = clickedItemUPC; 
 
\t \t \t \t var strippedUPC = '<h2>' + originalUPC.slice(1, -1); + '</h2>'; 
 
\t 
 
\t \t \t \t //show individual product information 
 
\t \t \t \t $('#productSocialShare').show(); 
 
\t \t \t \t $('#individualProduct').show(); 
 
\t \t \t \t $('#relatedProducts').show(); 
 
\t \t \t \t  
 
\t \t \t \t //append product information to appropriate DIV 
 
\t \t \t \t $('#productTitle').html(clickedItemName); 
 
\t \t \t \t $('#productUPC').html(strippedUPC); 
 
\t \t \t \t $('#productOZ').html(clickedItemOZ); 
 
\t \t \t \t $('#productDescription').html(clickedItemDescription); 
 
\t \t \t \t $('#productImage').html(clickedItemImage); 
 
\t \t \t \t  
 
\t \t \t \t //check if gluten free is true and show image 
 
\t \t \t \t if (clickedItemGluten == "Y") { 
 
\t \t \t \t \t clickedItemGluten = '<img class="img-responsive img-rounded img-margin" src="../images/misc/gluten_free_test.jpg">'; 
 
\t \t \t \t \t $('#productGlutenFree').html(clickedItemGluten); 
 
\t \t \t \t \t $('#productGlutenFree').show(); 
 
\t \t \t \t } else { \t 
 
\t \t \t \t \t $('#productGlutenFree').hide(); 
 
\t \t \t \t } 
 
\t \t \t \t  
 
\t \t \t \t //check if bpa free is true and show image 
 
\t \t \t \t if (clickedItemBPA == "Y") { 
 
\t \t \t \t \t clickedItemBPA = '<img class="img-responsive img-rounded img-margin" src="../images/misc/bpa_free_test.jpg">'; 
 
\t \t \t \t \t $('#productBPAFree').html(clickedItemBPA); 
 
\t \t \t \t \t $('#productBPAFree').show(); 
 
\t \t \t \t } else { \t 
 
\t \t \t \t \t $('#productBPAFree').hide(); 
 
\t \t \t \t } 
 
\t \t \t \t  
 
\t \t \t \t //check if gmo free is true and show image 
 
\t \t \t \t if (clickedItemGMO == "Y") { 
 
\t \t \t \t \t clickedItemGMO = '<img class="img-responsive img-rounded img-margin" src="../images/misc/gmo_test.jpg">'; 
 
\t \t \t \t \t $('#productGMOFree').html(clickedItemGMO); 
 
\t \t \t \t \t $('#productGMOFree').show(); 
 
\t \t \t \t } else { \t 
 
\t \t \t \t \t $('#productGMOFree').hide(); 
 
\t \t \t \t } 
 
\t \t \t \t  
 
\t \t \t \t //show random recipe for each item 
 
\t \t \t \t var url = ''; 
 
    \t \t \t $.getJSON(url, function(json) { 
 
\t \t \t \t \t \t var randomRecipe = json[Math.floor(Math.random() * json.length)]; 
 
\t \t \t \t \t \t randomRecipe += '<div>' + '<a href="' + randomRecipe.recipePageURL + '">' + '<img class="img-responsive img-hover similarProductImagesCategory" src="' + randomRecipe.recipeImageCategoryURL + '">' + '</a>' + '<a href="' + randomRecipe.recipePageURL +'">' + '<h3 class="similarProductSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '</a>' + '</div>'; 
 
    \t \t \t \t \t $('#featuredRecipe').append(randomRecipe); \t \t \t \t \t 
 
\t \t \t \t }); 
 
\t \t \t \t  
 
\t \t \t \t //show similar products 
 
\t \t \t \t var categoryItems = []; 
 
\t \t \t \t $.each(json, function(i, item){ 
 
\t \t \t \t \t if(window.location.hash.indexOf('Tomatoes') >= 0) { 
 
\t \t \t \t \t \t if(item.itemCommodity == '1120' && item.itemBrandLetter == "C") categoryItems.push(item); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t if(window.location.hash.indexOf('Olive') >= 0) { 
 
\t \t \t \t \t \t if(item.itemCommodity == '2120' && item.itemBrandLetter == "C") categoryItems.push(item); 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t \t 
 
\t \t \t \t var similarProduct= ''; 
 
\t \t \t \t $.each(json, function(i,item){ 
 
\t \t \t \t \t similarProduct = categoryItems[Math.floor(Math.random()*categoryItems.length)]; 
 
\t \t \t \t \t similarProduct += '<div>' + '<a href="#" class="showProduct"' + '>' + '<img class="img-responsive img-hover similarProductImagesCategory" src="' + similarProduct.imageURL + '">' + '<h3 class="similarProductSubCategoryImgCaption">' + similarProduct.itemName + '</h3>' + '</a>' + '</div>'; 
 
\t \t \t \t }); 
 
\t \t \t \t $('#productSimilar').append(similarProduct); 
 
\t \t \t });  
 
\t \t \t closeNav(); 
 
\t \t } 
 
\t \t 
 
\t } 
 
    }); 
 
});

<section> 
 
    <div id="productsSideBar" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <a href="#" id="displayall"><h3>View All</h3></a> 
 
    <a href="#" id="tomatoes">Tomatoes</a> 
 
    <a href="#" id="sauce">Sauce</a> 
 
    <a href="#" id="oliveoil">Olive Oil</a> 
 
    <a href="#" id="redwinevinegar">Red Wine Vinegar</a> 
 
    <a href="#" id="balsamicvinegar">Balsamic Vinegar</a> 
 
    <a href="#" id="peppers">Peppers</a> 
 
    <a href="#" id="artichokes">Artichokes</a> 
 
    <a href="#" id="olives">Olives</a> 
 
    <a href="#" id="beans">Beans</a> 
 
    <a href="#" id="caperspignolinuts">Capers & Pignoli Nuts</a> 
 
    <a href="#" id="specialties">Specialties</a> 
 
    <a href="#" id="spices">Spices</a> 
 
    <a href="#" id="fish">Fish</a> 
 
    <a href="#" id="brothstockssoups">Broth, Stocks & Soups</a> 
 
    <a href="#" id="breadcrumbs">Breadcrumbs</a> 
 
    <a href="#" id="gratedcheese">Grated Cheese</a> 
 
    </div> 
 
</section> 
 

 
<section id="productCategories"> 
 
\t <div class="container-fluid"> 
 
    \t <div class="row"> 
 
      <div class="col-lg-12"> 
 
       \t <br> 
 
       <span class="expandSidebar" onclick="openNav()">&#9776; Categories</span> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
       \t <div id="imagesCategoryProducts"></div> 
 
      </div> 
 
     </div> 
 
\t </div> 
 
</section> 
 

 
<!-- Product Row Start -->  
 
<section id="individualProduct"> 
 
\t <div class="container topmargin"> 
 
    \t <div class="row"> 
 
      <div class="col-md-7 col-sm-6"> 
 
       \t <!-- Product Title Div --> 
 
       \t <div id="productTitle"></div> 
 
       <!-- Product UPC Div --> 
 
       <div class="displayInlineBlock" id="productUPC"></div> 
 
       <span class="displayInlineBlock"><h2>•</h2></span> 
 
       <!-- Product OZ Div --> 
 
       <div class="displayInlineBlock" id="productOZ"></div> 
 
       <span class="displayInlineBlock"><h2>•</h2></span> 
 
       <!-- Where to Buy Icon --> 
 
       <div class="displayInlineBlock"><h3><a href="../where-to-buy.php"><span rel="popover" data-content="View Product Availability"><span class="fa-stack"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-map-marker fa-stack-1x fa-inverse"></i></span></span></a></h3></div> 
 
       <hr> 
 
       <!-- Product Description Div --> 
 
       \t <div id="productDescription"></div> 
 
       
 
       <div class="row center"> 
 
       \t <!-- Gluten Free Div --> 
 
       \t <div class="displayInlineBlock" id="productGlutenFree"></div> 
 
       \t <!-- BPA Free Div --> 
 
       \t <div class="displayInlineBlock" id="productBPAFree"></div> 
 
       \t <!-- GMO Div --> 
 
       \t <div class="displayInlineBlock" id="productGMOFree"></div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-5 col-sm-6"> 
 
       \t <!-- Product Image Div --> 
 
       \t <div id="productImage"></div> 
 
      </div> 
 
     </div> 
 
\t </div> 
 
</section> 
 
<!-- Product Row End --> 
 

 
<section id="relatedProducts"> 
 
\t <div class="container topmargin"> 
 
    \t <div class="row"> 
 
     \t <div class="col-md-7"> 
 
       <h1 class="center">Featured Recipe</h1> 
 
      \t <div id="featuredRecipe"></div> 
 
     \t </div> 
 
      <div class="col-md-5"> 
 
      \t <h1 class="center">Similar Product</h1> 
 
       <br> 
 
       <div id="productSimilar"></div> 
 
     \t </div> 
 
     </div> 
 
\t </div> 
 
</section>

Answer 1

好，有很多的事情是错误的代码，但我现在不会成现在。做你想做的事情很简单，你已经得到了你需要的所有代码，你只需要做一些调整就可以实现。

第一步。将点击事件绑定到主体而不是元素。

$("body").on('click', ".showProduct", function(event){ 

这样一来，与被点击就会触发功能，而不仅仅是注定要当初始功能跑元素的类显示产品页面上的任何元素。

其余部分非常简单，您已经获得了类似产品的信息，但您在创建元素时并未将其放入数据属性中。现在很明显有这样做的更好的方法......但这里是你会怎么做：

similarProduct = '<div>' + 
    '<a href="#" class="showProduct"' + 
    'data-itempageurl="' + similarProduct.itemFullUPC + '"' + 
    'data-itemgmo="' + similarProduct.itemGMOFree + '"' + 
    'data-itembpa="' + similarProduct.itemBPAFree + '"' + 
    'data-itemgluten="' + similarProduct.itemGlutenFree + '"' + 
    'data-itemlowsodium="' + similarProduct.itemLowSodium + '"' + 
    'data-itemorganic="' + similarProduct.itemOrganic + '"' + 
    'data-itemimage="' + similarProduct.imageURL + '"' + 
    'data-itemname="' + similarProduct.itemName + '"' + 
    'data-itemoz="' + similarProduct.itemPackSize + '"' + 
    'data-itemdescription="' + similarProduct.itemDescription + '"' + 
    'data-itemupc="' + similarProduct.itemFullUPC + '"' + '>' + 
    '<img class="img-responsive img-hover similarProductImagesCategory" src="' + similarProduct.imageURL + '">' + 
    '<h3 class="similarProductSubCategoryImgCaption">' + similarProduct.itemName + 
    '</h3>' + '</a>' + '</div>'; 
}); 

应该这样做......现在你会当你点击它应该同类产品的一个通知向您显示您想要的信息，但是它会将新的类似产品添加到已有的类似产品列表中，并且您点击的次数越多，这种差异越大。我相信你可以弄清楚如何清除列表。如果不只是喊。

这里是codepen：http://codepen.io/anon/pen/oYJpve

编辑：作为一个侧面说明...通常要JSON数据存储与产品ID为关键。然后，您只能将该键保存在数据属性中。单击时只需使用产品ID（密钥）访问存储对象中的信息。

这很容易做到。只需创建一个全局变量

var product_data = {}; 

然后在用函数获取数据时填充对象。所以，在你的Ajax调用成功，你可能有这样的事情：

product_data = json; 

甚至更​​好，你可以有一个数据变成你想要的结构的功能：

product_data = restructureDataFunction(json); 

然后你有你可以从中获得好的数据集。如果您需要对数据集进行更新，则可以在一个位置而不是每个元素中进行更新。

如果你愿意，看一下Angular 2，它应该教你很多，也可以帮助你处理未来的项目。这是一个非常强大的工具，特别是如果你有代表数据的html元素。