1
私のデータに問題があります（JSON形式）。私はデータベース結果をループし、ページ上のすべての項目を正しく表示することができました。ループ内では、クリックハンドラを、クラス名がのshowProductの要素にバインドします。これはクリックされたアイテムに応じてクリック関数のコールバックを実行します。JSONフィルタリングコンテンツに関するアドバイスが必要です
デフォルトでは、ループはページ上のすべての項目を表示します。上記のクラス（showProduct）を使用して、すべてを表示している現在の要素（つまりDIV）を非表示にし、正しい項目に関連するコンテンツのみをフィルタリングする機能が必要です。つまり、ページ上のすべてのアイテムからクリックされたアイテムを表示し、そのアイテムのみを表示したいだけです。しかし、そのアイテムに正しい出力（JSON）を表示する必要があります。
誰でも私を助けてくれるでしょうか、次に試してみるべきことを教えてください。
ありがとうございます！
function openNav() {
document.getElementById("productsSideBar").style.width = "250px";
}
function closeNav() {
document.getElementById("productsSideBar").style.width = "0";
}
$(document).ready(function() {
\t
\t 'use strict';
\t
\t $.ajax({
\t \t dataType: "jsonp",
\t \t url: '',
\t \t success: function(json){
\t \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 case '#oliveoil':
\t \t \t \t displayOliveOil();
\t \t \t \t break;
\t \t \t default:
\t \t \t displayAll();
\t \t \t \t break;
\t \t }
\t \t
\t \t //display product category based on click
\t \t $("#tomatoes").click(function(event){
\t \t \t displayTomatoes();
\t \t });
\t \t $("#oliveoil").click(function(event){
\t \t \t displayOliveOil();
\t \t });
\t \t $("#displayall").click(function(event){
\t \t \t displayAll();
\t \t });
\t \t
\t \t //display tomatoes function
\t \t function displayTomatoes() {
\t \t \t var categoryImage = '';
\t \t
\t \t \t $.each(json, function (i, item) {
\t \t \t \t if (item.itemCommodity == "1120" && 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-itemname="'+ item.itemName +'">' +
\t \t \t \t \t \t '<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 $('#imagesCategoryProducts').hide().html(categoryImage).fadeIn('slow');
\t \t \t
\t \t \t $(".showProduct").click(function(event){
\t \t \t \t
\t \t \t \t $('#productCategories').hide();
\t \t
\t \t \t \t var productTitle;
\t \t \t \t
\t \t \t \t $.each(json, function (i, item) {
\t \t \t \t if ($(this).data('itemname')) {
\t \t \t \t \t productTitle += '<h1>' + item.itemName + '</h1>';
\t \t \t \t }
\t \t \t \t });
\t \t \t \t
\t \t \t \t $('#productSocialShare').show();
\t \t \t \t $('#individualProduct').show();
\t \t \t $('#relatedProducts').show();
\t \t \t \t $('#productTitle').html(productTitle);
\t
\t \t \t });
\t \t \t closeNav();
\t \t }
\t \t
\t \t //display oliveoil function
\t \t function displayOliveOil() {
\t \t \t var categoryImage = '';
\t \t \t var location;
\t \t
\t \t \t $.each(json, function (i, item) {
\t \t \t \t switch(item._id)
\t \t \t \t {
\t \t \t \t \t case '':
\t \t \t \t \t \t location = '';
\t \t \t \t \t \t break;
\t \t \t \t \t default:
\t \t \t \t \t \t location = '';
\t \t \t \t \t \t break;
\t \t \t \t }
\t \t
\t \t \t \t if (item.itemCommodity == "2120" && 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="' + location + '">' +
\t \t \t \t \t \t '<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 $('#imagesCategoryProducts').hide().html(categoryImage).fadeIn('slow');
\t \t \t closeNav();
\t \t }
\t \t
\t \t //display all products function
\t \t function displayAll() {
\t \t \t var categoryImage = '';
\t \t \t var location;
\t \t
\t \t \t $.each(json, function (i, item) {
\t \t \t \t categoryImage += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">' + '<a href="' + location + '">' +
\t \t \t \t '<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 $('#imagesCategoryProducts').hide().html(categoryImage).fadeIn('slow');
\t \t \t closeNav();
\t \t }
\t \t
\t
\t }
});
});<section>
<div id="productsSideBar" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</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()">☰ Categories</span>
</div>
</div>
<div class="row">
<div class="col-lg-12">
\t <div id="imagesCategoryProducts"></div>
</div>
</div>
\t </div>
</section>
@Taplarが上記のコードを追加しました。私はセキュリティ上の理由からJSONを含んでいませんでしたが、あなたはそのアイディアを得ています。 "ディスプレイトマト"機能の下にある通知機能には、.showProductというクリック機能があります。私はクリックしたものに応じて特定のアイテムを絞り込むことを試みていますが、何をすべきかわかりません。 – Tom
は何をすべきかわかりません。もし私がif文をクリックしてそのidにjson項目をマッチさせるためにif文を実行する必要があるかどうか確かめていなかったのです。 – Tom
その部分を理解しようとしています。 JSONファイルの各項目には独自のIDがあります。私は一度そのアイテムの内容を表示するアイテムをクリックするための方法を見つけることを試みています。 JSON IDをクリックイベントにリンクする方法をお勧めしますか？それとも良い方法がありますか？私は本当にあなたの助けに感謝btw。私はまだ – Tom