javascript - 通过数组排序以通过 jQuery 将代码放置在适当的 div 中

Question

目前正在制作一个网站来索引和播放存储在我硬盘上的电影，我最近将 dvd 作为一个小元素推出。我有一个“主电影列表”JSON 文件，其中包含每部电影所需的所有数据，包括名称、视频源、视频海报源和流派，我希望允许使用将电影放置在多种不同流派中。

目前我遇到的问题是，当我通过流派列表进行解析时，它没有将 html 放在正确的 ID 中，该 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);
    }
  });
});