Question

我正在使用JSON文件，我在其中提取产品页面的数据。我有一个侧栏，链接到每个产品类别（例如西红柿，橄榄油等）。我正在为侧边栏中的每个链接使用单击功能，以便在单击它们时显示DIV中的相应产品。我的代码工作正常但我需要帮助找出如何从另一个页面链接到生成的DIV内容。换句话说，它不会创建一个唯一的URL，因为它只是替换DIV内容。

<script>
$(document).ready(function() {
	 
	 'use strict';

   	 var url = 'path to json';
    
     $.getJSON(url, function(json) {
		 
		 
		 
		  // initially display all products
		  var categoryImage = '';
		  var location;
		  
		  $.each(json, function (i, item) {
			  
			  categoryImage += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">' + '<a href="' + location + '">' + 
			  '<img class="img-responsive img-hover productImagesCategory" src="' + item.imageURL + '">' + '<h3>' + item.itemName + '</h3>' + '</a>' + '</div>';
		  });
		  
		  $('#imagesCategoryProducts').html(categoryImage); 
		  
		  
	
		  // tomatoes display data on click
		  $("#tomatoes").click(function(event){
			  var categoryImage = '';
			  var location;
		  
			  $.each(json, function (i, item) {
				 
		  
				  if (item.itemCommodity == "1120") {
						  categoryImage += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">' + '<a href="' + location + '">' + 
						  '<img class="img-responsive img-hover productImagesCategory" src="' + item.imageURL + '">' + '<h3>' + item.itemName + '</h3>' + '</a>' + '</div>';
				  }
			  });
			  $('#imagesCategoryProducts').html(categoryImage); 
		  });
		  
		  
		  
		  // olive oil display data on click
		  $("#oliveoil").click(function(event){
			  var categoryImage = '';
			  var location;
		  
			  $.each(json, function (i, item) {
				  switch(item._id) 
				 
		  
				  if (item.itemCommodity == "2120") {
						  categoryImage += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">' + '<a href="' + location + '">' + 
						  '<img class="img-responsive img-hover productImagesCategory" src="' + item.imageURL + '">' + '<h3>' + item.itemName + '</h3>' + '</a>' + '</div>';
				  }
			  });
			  $('#imagesCategoryProducts').html(categoryImage); 
		  });
	 });
})();
</script>

<script>
function openNav() {
    document.getElementById("productsSideBar").style.width = "250px";
}

function closeNav() {
    document.getElementById("productsSideBar").style.width = "0";
}
</script>

/* Products Sidebar */

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 18px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
	z-index: 9999;
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* Products Sidebar Expand Button */

.expandSidebar {
	font-size:33px;
	cursor:pointer;
	font-family: Quaddratt;
}

.backToSidebar {
	font-size:33px;
	cursor:pointer;
	font-family: Quaddratt;
	color: #000;
}

.backToSiderbar a {
	color: #000;
}

.backToSiderbar a:hover {
	color: #333333;
}


/* Products Category Div Styles */

#imagesCategoryProducts h3 {
	text-align: center;
	font-size: 18px;
	text-transform: uppercase;
	height: 40px;
}

#imagesCategoryProducts a {
	color: #000;
}

#imagesCategoryProducts a:hover {
	color: #333333;
}

/* Products Category Image Styles */

.productImagesCategory {
	width: 700px;
	margin-bottom: -20px;
	padding: 40px;
	height: 350px !important;
	object-fit: contain;
}

<section>
  <div id="productsSideBar" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</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>

<!-- Products Products Row -->     
<section> 
	<div class="container-fluid">
    	<div class="row">
             <div class="col-lg-12">
             	<br>
                <span class="expandSidebar" onclick="openNav()">&#9776; Filter by Category</span>
             </div>
        </div>
        <div class="row">
             <div class="col-lg-12"> 
             	<div id="imagesCategoryProducts"></div> 
             </div>
        </div>
	</div>
</section>
<!-- Products Row End -->

Answer 1

我已经修改了您的代码，只要您执行data，就会将该json存储到getJSON变量中。

#tomatoes的点击处理程序现在使用data对象，该对象现已在发布的代码中可用。

https://plnkr.co/edit/Sl1vFH6W40PVf7ooleU7?p=preview

您可以为其他护理应用相同的逻辑。

试图找出如何添加链接来访问使用JS创建的DIV中的内容

1 个答案: