Question

我的数据存在问题（采用JSON格式）。我能够遍历我的数据库结果并正确显示页面上的所有项目。在循环中，我将单击处理程序绑定到具有类名 showProduct 的元素，该函数根据单击的项执行单击函数回调。

默认情况下，循环显示页面上的所有项目。使用上面的那个类（即 showProduct ），我希望该函数隐藏显示所有内容的当前元素（即DIV），并仅过滤与正确项目相关的内容。换句话说，我只是想显示从页面上的所有项目中点击的任何项目，只显示该项目。但它需要显示该项目的正确输出（JSON）。

任何人都可以帮助我或指导下一步我应该尝试的事情吗？

谢谢！

function openNav() {
    document.getElementById("productsSideBar").style.width = "250px";
}

function closeNav() {
    document.getElementById("productsSideBar").style.width = "0";
}

$(document).ready(function() {
	
	  'use strict';
	 
	  $.ajax({
  		dataType: "jsonp",
  		url: '',
  		success: function(json){
		  
		  //check for window hash and display appropriate product category	
		  var currentHash = window.location.hash;
		  switch(currentHash) 
		  {
			  case '#tomatoes':
				   displayTomatoes(); 
				   break;
			  case '#oliveoil':
				   displayOliveOil();
				   break;
			  default:
			       displayAll();
				   break;
		  }
		  
		  //display product category based on click
		  $("#tomatoes").click(function(event){
  			 displayTomatoes();
		  });
		  $("#oliveoil").click(function(event){
			 displayOliveOil();
		  });
		  $("#displayall").click(function(event){
			 displayAll();
		  });
		   
		  //display tomatoes function 
		  function displayTomatoes() {
			  var categoryImage = '';
		  
			  $.each(json, function (i, item) {
				  if (item.itemCommodity == "1120" && item.itemBrandLetter == "C") {
						  categoryImage += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">'  + '<a href="#"' + 'class="showProduct" data-itemname="'+ item.itemName +'">' +
						  '<img class="img-responsive img-hover productImagesCategory" src="' + item.imageURL + '">' + '<h3>' + item.itemName + '</h3>' + '</a>' + '</div>';
				  }
			  });
			  $('#imagesCategoryProducts').hide().html(categoryImage).fadeIn('slow');
			  
			  $(".showProduct").click(function(event){
				  
				 $('#productCategories').hide();
		
				 var productTitle; 
				 
			  	 $.each(json, function (i, item) {
				   if ($(this).data('itemname')) {
					  productTitle += '<h1>' + item.itemName + '</h1>';
				   }
			  	 });
				 
				 $('#productSocialShare').show();
				 $('#individualProduct').show();
			     $('#relatedProducts').show();  
				 $('#productTitle').html(productTitle);
	
			  });
			  closeNav();
		  }
		  
		  //display oliveoil function
		  function displayOliveOil() { 
			  var categoryImage = '';
			  var location;
		  
			  $.each(json, function (i, item) {
				  switch(item._id) 
				  {
					  case '':
						  location = '';
						  break;
					  default:
						  location = '';
						  break;
				  }
		  
				  if (item.itemCommodity == "2120" && item.itemBrandLetter == "C") {
						  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').hide().html(categoryImage).fadeIn('slow'); 
			  closeNav();
		  }
		  
		  //display all products function
		  function displayAll() {
			  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').hide().html(categoryImage).fadeIn('slow'); 
			  closeNav();
		  }  
		  
	  
	   }
   });
});

<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"> 
	<div class="container-fluid">
    	<div class="row">
             <div class="col-lg-12">
             	<br>
                <span class="expandSidebar" onclick="openNav()">&#9776; Categories</span> 
             </div>
        </div>
        <div class="row">
             <div class="col-lg-12"> 
             	<div id="imagesCategoryProducts"></div> 
             </div>
        </div>
	</div>
</section>

Answer 1

这里的评论是我建议您尝试的。当你创建元素时，我建议做一些小的补充。

categoryImage +=
    '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">'+
        '<a href="#"' + 'class="showProduct" data-itemname="'+ item.itemName +'">'+
            '<img class="img-responsive img-hover productImagesCategory" src="' + item.imageURL + '">'+
                '<h3>' + item.itemName + '</h3>'+
        '</a>' +
    '</div>';

如果您查看该链接，则会在data-itemname添加一个新的数据元素。

现在，您可以更改单击处理程序以使用此人。

          $(".showProduct").click(function(event){

             $('#productCategories').hide();

             var productTitle;
             var clickedItemName = $(this).data('itemname');


             $.each(json, function (i, item) {
               if ( item.itemName === clickedItemName ) {
                  productTitle += '<h2>' + item.itemName + '</h2>';
               }
             });

可能就是这样。

需要有关JSON过滤内容的建议

1 个答案: