Question

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

例如，当用户点击＆＃34;家庭的健康乐趣＆＃34;按钮，它将显示属于＆＃34;家庭的健康乐趣类别下的所有数据＆＃34;。

我该怎么做呢？

HTML

<body>

<!-------------------------------------------------------- Home Page - List of activity category -------------------------------------------------------->
<nav class='current'>
    <h1>FUNpedia</h1>
    <a class='button' id="goto-new-note">New</a>
</nav>
<article id="home" class="current">
    <section>
        <ul class="list" id="home-category-list">
        </ul>
    </section>
</article>


<!-------------------------------------------- Selected Activity Page - List of activities within the category -------------------------------------------->
<nav class='next'>
    <!-- <a class='button backTo' id="goto-home">Back</a> -->
    <a id="goto-home" style="margin-top:10px;"><img src="img/backBtn.png" width="30" height="30"></a>
    <h1>Attractions</h1>
</nav>

<article id="category-view" class="next">
    <section>
        <ul class='list'>
            <li class='comp'>
                <!-- <h3 class='category-title'></h3>
                <p class='category-content'></p> -->
                <aside>
                <img title='Imagine Dragons' src="../images/music/Imagine Dragons.png" height="80px">
                </aside>
            <div>
                <h3 class='category-title'></h3>
                <h4 class='category-categoryName'></h4>
                <p class='category-content'></p>
            </div>
                <aside>
                <span class='show-detail'></span>
                </aside>
            </li>
        </ul>
    </section>
</article>
</body>

的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");
    }

Answer 1

SOLUTION （已更新）

为了清晰起见，我更改了很多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);

Answer 2

将singletap事件更改为click事件。我这样做，现在显示类别信息（JSFiddle file）。

这是我用来测试的代码（我评论$.UIGoToArticle("#category-view")，因为我没有对UIGoToArticle的引用）：

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");
  }

<强>更新

要显示具有相同名称的所有类别的内容，您需要执行以下操作（JSFiddle file）：

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");
}

.html()替换HTML元素内部内容，因此在这种情况下，您需要使用.append()或.attach()逐个附加类别内容，或者将所有内容加入变量中然后执行.html(variable )。

之类的操作

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

2 个答案: