Javascript 在html页面中显示数组列表中相同类别的项

我有一个数组，其中包含类别列表及其详细信息。 我试图显示同一类别的所有内容

例如，当用户单击“家庭健康乐趣”按钮时，它将显示“家庭健康乐趣”类别下的所有数据

我该怎么做呢

HTML

FUNpedia
新的


吸引

Javascript

    /* ----------------------------------------------------------- Array of category and detail ----------------------------------------------------------- */
    var category = [
        {
            categoryName: "Wholesome fun for the family",
            imageName: "attraction.jpg",
            content: "Number 1"
        },
        {
            categoryName: "Wholesome fun for the family",
            imageName: "attraction.jpg",
            content: "Number 2"
        },
        {
            categoryName: "Adventure for the family",
            imageName: "themePark.jpg",
            content: "Hihihihi"
        },
        {
            categoryName: "For the young and curious",
            imageName: "youngExplorer.jpg",
            content: "Hihihihi"
        },
        {
            categoryName: "A city of greenery",
            imageName: "parkNgarden.jpg",
            content: "Hihihihi"
        },
        {
            categoryName: "Get ready to experience explosive sporting action",
            imageName: "extremeSG.jpg",
            content: "Hihihihi"
        },
        {
            categoryName: "Fun in the water",
            imageName: "wetAdventure.jpg",
            content: "Hihihihi"
        }
    ];

    for (var i = 0; i < category.length; i++) {
        listNode(i);
    }

    /* ----------------------------------------------------------- Display the list of category ----------------------------------------------------------- */
    function listNode(id) {
        $("#home-category-list").append("<li class='nav' data-id='" + id + "'>" +
                                    "<img src=img/" + category[id].imageName + ">" +
                                    "</li>");
    }

    /* -------------------------------------------------- Show the list of activities within the category -------------------------------------------------- */
    $("#home-category-list").on("singletap", "li", function() {
        var id = $(this).data("id");
        listActivities(id);
    });

    function listActivities(id) {
        $("#category-view").data("id", id);

        $("#category-view .category-title").text(category[id].categoryName);
        $("#category-view .category-content").html(category[id].content);
        $("#category-view .category-categoryName").html(category[id].categoryName);

        $.UIGoToArticle("#category-view");
    }

/*--------------------------------------------------------------类别和详细信息数组-------------------------------------------*/
变量类别=[
{
类别名称：“家庭健康乐趣”，
imageName:“attraction.jpg”，
内容：“1号”
},
{
类别名称：“家庭健康乐趣”，
imageName:“attraction.jpg”，
内容：“2号”
},
{
类别名称：“家庭冒险”，
imageName:“themePark.jpg”，
内容：“嗨嗨”
},
{
categoryName：“为年轻人和好奇的人”，
imageName:“youngExplorer.jpg”，
内容：“嗨嗨”
},
{
类别名称：“绿色之城”，
imageName:“parkengarden.jpg”，
内容：“嗨嗨”
},
{
categoryName：“准备好体验爆炸性的运动动作”，
imageName:“extremeSG.jpg”，
内容：“嗨嗨”
},
{
类别名称：“水中乐趣”，
imageName:“wetAdventure.jpg”，
内容：“嗨嗨”
}
];
对于（变量i=0；i”+
"" +
“”；
}
/*-------------------------------------------------------------显示类别内的活动列表------------------------------------------*/
$（“#主页类别列表”）。在（“singletap”，“li”，函数（）上{
var id=$（this.data（“id”）；
清单活动（id）；
});
功能列表活动（id）{
$（“#类别视图”）。数据（“id”，id）；
$（#category view.category title”）.text（category[id].categoryName）；
$（#category view.category content”）.html（category[id].content）；
$（#category view.category categoryName”）.html（category[id].categoryName）；
$.UIGoToArticle（“类别视图”）；
}

将

单键点击事件更改为
点击事件。我这样做了，现在类别信息出现了（）

这是我用来测试的代码（我注释了
$.UIGoToArticle（“类别视图”）
，因为我没有对UIGoToArticle的引用）：

.html（）
替换html元素内部内容，因此在本例中，您需要使用
.append（）
或
.attach（）
逐个追加类别内容，或将所有内容加入一个变量，然后执行类似于
.html（变量）
的操作（更新）

为了清晰起见，我修改了很多你的HTML。我不确定这是你想要的结果，但我很肯定你会从这里弄明白的

javascript的魔力：

var category = [...];

//generate a category list without repeated categories
function newCategoryList(){
  var categoryList = [];
  for(var a=0; a<category.length; a++){
    var unique = true;
    for(var b=0; b<categoryList.length; b++){
      if(category[a].categoryName == categoryList[b].name) unique = false;    
    }
    if(unique) categoryList.push({
      name: category[a].categoryName,
      img: category[a].imageName
    });
  }
  return categoryList;
}

//add category to home list
function listCategories(id) {
  $('#home-category-list').append('<li class="nav" data-id="'+id+'"><img src="http://placehold.it/50x50/&text='+categoryList[id].img+'"/>'+categoryList[id].name+'</li>');
}

//list all activities in the respective category
function listActivities(id){
  $('#home-activity-list').html('');
  var cat = categoryList[id];
  for(var a=0; a<category.length; a++){
    if(category[a].categoryName == cat.name){
      newActivity(a);
    }
  }
}


//add new Activity to the list
function newActivity(id){  
  var img = $('<img src="http://placehold.it/150x50/&text='+category[id].imageName+'">');
  var title = $('<h3>'+category[id].categoryName+'</h3>');
  var content = $('<p>'+category[id].content+'</p>');
  var li = $('<li>').append(img, title, content).appendTo($('#home-activity-list'));
}

//generate the list of categories  
var categoryList = newCategoryList();

//list all categories
$.each(categoryList, listCategories);

//attach category click event
$("#home-category-list").on("click singletap", "li", function(){
  var id = $(this).data("id");
  listActivities(id);
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
});

//populate the Activity list
newActivity(0);

var类别=[…]；
//生成没有重复类别的类别列表
函数newCategoryList（）{
变量类别列表=[]；
对于（var a=0；a在javascript中创建数组时，您应该注意数组结构。如果类别名称是键，这将很容易。但是如果同一类别中有两个项目（例如，家庭健康乐趣），当我单击“家庭健康乐趣”时我可以在页面中显示2个项目吗？有可能实现吗？当我点击“家庭健康乐趣”时，我尝试了你的项目它只显示编号1的项目内容。我希望它显示编号1和编号2的内容，因为它们属于同一类别。如果要同时显示两个编号，则需要执行以下操作：。如果使用
.html（）
HTML元素的内部代码被替换。要连接HTML元素中的两个内容，需要逐个追加/附加，或者在变量中连接这两个内容，然后使用
.HTML（）
使用该变量谢谢您的帮助。另外，是否可以将imageName也保存到categoryList中，以便在主类别列表中显示类别的图像而不是单词？我一直在尝试将categoryName和imageName推到categoryList中，但当我在主类别列表中显示它时，它会显示一个我将一个接一个地显示categoryName和imageName。而不是只显示imageName。我更新了答案，使其在categoryList中显示类别图像。还添加了一个动画卷轴和一些样式…享受吧！
var category = [
      {
          categoryName: "Wholesome fun for the family",
          imageName: "attraction.jpg",
          content: "Number 1"
      },
      {
          categoryName: "Wholesome fun for the family",
          imageName: "attraction.jpg",
          content: "Number 2"
      },
      {
          categoryName: "Adventure for the family",
          imageName: "themePark.jpg",
          content: "Hihihihi"
      },
      {
          categoryName: "For the young and curious",
          imageName: "youngExplorer.jpg",
          content: "Hihihihi"
      },
      {
          categoryName: "A city of greenery",
          imageName: "parkNgarden.jpg",
          content: "Hihihihi"
      },
      {
          categoryName: "Get ready to experience explosive sporting action",
          imageName: "extremeSG.jpg",
          content: "Hihihihi"
      },
      {
          categoryName: "Fun in the water",
          imageName: "wetAdventure.jpg",
          content: "Hihihihi"
      }
  ];



  $( document ).ready(function() {
      for (var i = 0; i < category.length; i++) {
          listNode(i);
      }


      $("#home-category-list").on("click", "li", function() {
          var id = $(this).data("id");
          listActivities(id);
      });
  });

  function listNode(id) {
      $("#home-category-list").append("<li class='nav' data-id='" + id + "'>" + "<img src=img/" + category[id].imageName + ">" + "</li>");
  }



  function listActivities(id) {
      $("#category-view").data("id", id);
      var aux = $("#category-view .category-title");
      $("#category-view .category-title").text(category[id].categoryName);
      $("#category-view .category-content").html(category[id].content);
      $("#category-view .category-categoryName").html(category[id].categoryName);

      //$.UIGoToArticle("#category-view");
  }

function listActivities(id) {
    $("#category-view").data("id", id);
    var aux = $("#category-view .category-title");
    $("#category-view .category-title").text(category[id].categoryName);


    $("#category-view .category-content").empty();

    var selectedName = category[id].categoryName;

    $.each(category, function()
    {
        if(this.categoryName == selectedName)
          $("#category-view .category-content").append(this.content);
    });

    $("#category-view .category-categoryName").html(category[id].categoryName);

    //$.UIGoToArticle("#category-view");
}

var category = [...];

//generate a category list without repeated categories
function newCategoryList(){
  var categoryList = [];
  for(var a=0; a<category.length; a++){
    var unique = true;
    for(var b=0; b<categoryList.length; b++){
      if(category[a].categoryName == categoryList[b].name) unique = false;    
    }
    if(unique) categoryList.push({
      name: category[a].categoryName,
      img: category[a].imageName
    });
  }
  return categoryList;
}

//add category to home list
function listCategories(id) {
  $('#home-category-list').append('<li class="nav" data-id="'+id+'"><img src="http://placehold.it/50x50/&text='+categoryList[id].img+'"/>'+categoryList[id].name+'</li>');
}

//list all activities in the respective category
function listActivities(id){
  $('#home-activity-list').html('');
  var cat = categoryList[id];
  for(var a=0; a<category.length; a++){
    if(category[a].categoryName == cat.name){
      newActivity(a);
    }
  }
}


//add new Activity to the list
function newActivity(id){  
  var img = $('<img src="http://placehold.it/150x50/&text='+category[id].imageName+'">');
  var title = $('<h3>'+category[id].categoryName+'</h3>');
  var content = $('<p>'+category[id].content+'</p>');
  var li = $('<li>').append(img, title, content).appendTo($('#home-activity-list'));
}

//generate the list of categories  
var categoryList = newCategoryList();

//list all categories
$.each(categoryList, listCategories);

//attach category click event
$("#home-category-list").on("click singletap", "li", function(){
  var id = $(this).data("id");
  listActivities(id);
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
});

//populate the Activity list
newActivity(0);