尝试找出如何基于window.location.hash显示内容

Question

我使用JSON并通过href标记传递数据，并使用click事件显示产品数据库中的特定项目。我的问题是我在脚本中有代码，为每个产品分配一个唯一的窗口哈希。它采用产品名称并剥离空格。

如果从外部网址链接时哈希标记与项目匹配，如何在页面上显示正确的项目？

例如，当在页面上点击其中一个项目时，网址将显示类似www.website.com＃CherryTomatoes。

显然，我无法从其他网站链接到此，因为只有在触发click事件时才存在哈希。我希望能够在使用外部链接时自动显示正确的项目。以下是我的代码希望有人可以帮我解决这个问题！

 //display product category based on click
      $("#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.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>';

          });

          $('#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 = '<h2>' + $(this).data('itemoz') + '</h2>';
             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 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
               }

               //assign window hash to each product
               if (item.itemName === 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>';

               //show individual product information
               $('#productSocialShare').show();
               $('#individualProduct').show();
               $('#relatedProducts').show();   

               //append product information to appropriate DIV
               $('#productTitle').html(clickedItemName);
               $('#productUPC').html(strippedUPC);
               $('#productOZ').html(clickedItemOZ);
               $('#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="../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="../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="../images/misc/gmo_test.jpg">';
                   $('#productGMOFree').html(clickedItemGMO);
                   $('#productGMOFree').show();
               } else { 
                   $('#productGMOFree').hide();
               }

            });
          closeNav();
      }