Question

目前，我正在建立一个网站来索引和播放存储在硬盘中的电影，而我最近刚刚将DVD制作成了一个小项目。我有一个“主电影列表” JSON文件，其中包含每部电影所需的所有数据，包括名称，视频源，视频海报源和流派，我希望允许将其以多种不同流派使用。

当前我遇到的问题是，当我在流派列表中进行解析时，生成的问题是无法将html放置在网页上喜欢的id上。

例如： “体裁”：“喜剧，最近，科幻”

我按照我的想法去做，通过getJSON并设置一个输出变量，将其获取体裁值，将其拆分成一个数组，并通过循环遍历每个变量来获取元素。它没有将其放置在正确的位置。出于某种原因，上面的示例将被放置在喜剧，近期，科幻，恐怖以及其他一些类别中，我绝对没有理由。

$.getJSON('/webresource/data/movies.json', function(data) {
  console.log(data);
  var output = '';
  var ele = $('');
  $.each(data, function(key, val) {

    output += '<div class="video_box lazy-background" video-src="' +
      val.video_src + '" video-poster-src="' +
      val.video_poster_src + '">' +
      '<h5>' + val.name + '</h5>' +
      '</div> ';

    var genres = val.genre;
    var genresarray = genres.split(',');

    for (i = 0; i < genresarray.length; i++) {
      var genreelement = $('#' + genresarray[i]);
      genreelement.html(output);
    }
  });
});

[ {
  "name": "a star is born", "video_src":"/files/movies/A%20Star%20Is%20Born/astarisborn.mp4", "video_poster_src":"https://images-na.ssl-images-amazon.com/images/I/51R-TU6VaTL.jpg", "genre":"recently,romance,drama"
}

] // this is an example of the json

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="genre_box">
  <h3>RECENTLY ADDED</h3>
  <div class="scroll_box" id="recently"></div>
</div>

<div class="genre_box">
  <h3>ACTION</h3>
  <div class="scroll_box" id="action"></div>
</div>

<div class="genre_box">
  <h3>COMEDY</h3>
  <div class="scroll_box" id="comedy"></div>
</div>

Answer 1

您的output变量将附加并保留在$.each循环的每次迭代中。您想要的是附加到$("#action")，$("#comedy")等的末尾。您应该按照以下步骤进行操作：

$.getJSON('/webresource/data/movies.json', function(data) {
  console.log(data);
  $.each(data, function(key, val) {

    var output = '<div class="video_box lazy-background" video-src="' +
      val.video_src + '" video-poster-src="' +
      val.video_poster_src + '">' +
      '<h5>' + val.name + '</h5>' +
      '</div> ';

    var genres = val.genre;
    var genresarray = genres.split(',');

    for (var i = 0; i < genresarray.length; i++) {
      var genreelement = $('#' + genresarray[i]);
      genreelement.append(output);
    }
  });
});

通过数组排序，以通过jQuery

1 个答案: