如何在 HTML 中使用 Javascript 从对象获取多个输出？

Question

我正在尝试使用过滤器输出对象属性的所有可能性。用户选择游戏的平台和类型，然后输出名称、图片和描述。如果我有多个属于同一平台和类型的游戏，我希望将它们全部列出。在控制台中它们会这样做，但是当我将它们输出到 html 文档时，我只会得到列出的名字、图片和描述。

JavaScript

var games=[{name:'Forza',platform:'xbox',genre:'Racing',descr:'Description',imgr:'forza.jpg'},
{name:'Need For Speed',platform:'xbox',genre:'Racing',descr:'Description',imgr:'nfs.jpg'}

var genre;
var platform;
$("#platformType").change(function(){
    platform=$(this).val()
})
$("#genreType").change(function(){
    genre=$(this).val()
})
$("#Submit").click(function(){games.filter((e)=>e.platform==platform && e.genre==genre?document.getElementById("theGame").innerHTML = e.name:false)})
$("#Submit").click(function(){games.filter((e)=>e.platform==platform && e.genre==genre?document.getElementById("pic").innerHTML = pic.setAttribute("src", e.imgr):false)})
$("#Submit").click(function(){games.filter((e)=>e.platform==platform && e.genre==genre?document.getElementById("desc").innerHTML = e.descr:false)})

HTML：

    <label for="platformType">
        Platform
    </label>
    <select name="platform" id="platformType">
        <option value="PC">(Choose Platform)</option>
        <option value="PC">PC</option>
        <option value="PS4">Playstation 4</option>
        <option value="switch">Switch</option>
        <option value="xbox">Xbox One</option>  
    </select>
    <br />
    <br />

    <label for="genreType">
        Genre
    </label>
    <select name="genre" id="genreType">
        <option value="PC">(Choose Genre)</option>
        <option value="Action">Action/Adventure</option>
        <option value="Fighter">Fighter</option>
        <option value="MMO">MMO</option>
        <option value="MOBA">MOBA</option>
        <option value="OpenWorld">Open World</option>
        <option value="Platformer">Platformer</option>
        <option value="Racing">Racing</option>
        <option value="RPG">RPG</option>
        <option value="Shooter">Shooter</option>
        <option value="Sports">Sports</option>
    </select>
    <br />
    <br />

    <input type="submit" value="Find Game" id="Submit" />

    </br >
        <h1 id="theGame"></h1>
    </br >
        <img id="pic" src="q.jpg"/>
    </br >
        <p id="desc"></p>

Answer 1

可以使用类似于以下过滤器功能的东西来实现您的目标。您提供的代码中存在一些问题，导致代码无法完成您想要的。

更新的 JS：

var games=[
  {name:'Forza',
   platform:'xbox',
   genre:'racing',
   descr:'Description',
   imgr:'forza.jpg'},
  {name:'Need For Speed',
   platform:'xbox',
   genre:'racing',
   descr:'Description',
   imgr:'nfs.jpg'}];

/* make sure you add a default value to these variables to avoid errors since the user could submit the button without selecting anything*/

var genre = 'racing';
var platform = 'xbox';

/* onload function */
$(function(){

/* grabs the array of elements in the HTML document that will be changed */

var gameTitle = $('.theGame');
var gameDesc = $('.desc');
var gamePic = $('.pic');

$("#platformType").change(function(){
  platform=$(this).val()
});

$("#genreType").change(function(){
  genre=$(this).val()
});

/* you only need one 'click' function for '#Submit' */

$("#Submit").click(function(){
console.log(genre, gameTitle, gameDesc, gamePic);
var matchedGames = games.filter((gameObject) => gameObject.genre==genre&&gameObject.platform==platform);

/* clearing out data first */
  for (i=0;i<gameTitle.length;i++) {
    gameTitle[i].innerHTML="";
    gameDesc[i].innerHTML="";
    gamePic[i].src="";
  }

/* then adding the filtered list of games into the page */
  for (i=0;i<matchedGames.length;i++) {
    gameTitle[i].innerHTML=matchedGames[i].name;
    gameDesc[i].innerHTML=matchedGames[i].descr;
    gamePic[i].src=matchedGames[i].imgr;
  }


});


});

更新的 HTML：

<fieldset>
  <input type="submit" value="Find Game" id="Submit" />
  <select name="filterGame" id="platformType">
    <option value="" disabled class="option1">Select</option>
    <option value="xbox">xBox</option>
    <option value="xbox">Play Station</option>
  </select>
  <select name="filterGame" id="genreType">
    <option value="" disabled class="option1">Select</option>
    <option value="racing">Racing</option>
    <option value="racing">RPG</option>
  </select>
</fieldset>
<!-- added elements to work with the filter function, this can be done a few different ways -->
  <div>
    <h2 class="theGame"></h2>
    <img class="pic" src="">
    <p class="desc"></p>
    <h2 class="theGame"></h2>
    <img class="pic" src="">
    <p class="desc"></p>
    <h2 class="theGame"></h2>
    <img class="pic" src="">
    <p class="desc"></p>
    <h2 class="theGame"></h2>
    <img class="pic" src=""/>
    <p class="desc"></p>
</div>

在 JS 中：

• filter()返回一个数组，不能用于对页面进行更改（如使用.innerHTML），

• 'false' 不必显式声明（因此这里不需要三元运算符），因为如果数组元素不满足要求，则不会包含在返回的大批。这将是令人满意的：

var gameArr = games.filter((e)=>e.platform==platform && e.genre==genre);

• 使用过滤器函数后返回一个新数组（matchedGames），这个数组用于给我添加的HTML元素添加数据（<h2>元素的个数要和游戏总数匹配如果你选择这样做

• 您可以使用 $('body').append() 方法来执行类似的操作，而不是手动对元素进行逐个编码

• 不必将游戏数据添加到<h2>或<p>元素中，您也可以将数据和图像添加到表格中，例如，达到类似的效果

• 每当用户重新过滤游戏时，您还需要一些方法来清除先前条目中的数据，您可以使用 for 循环来完成此操作，我在上面添加了一个作为示例

在 HTML 中：

• 我使用了<h2> 元素而不是<h1>，从技术上讲，页面中应该只有一个<h1> 元素，这应该是使您的页面屏幕阅读友好的标题

希望这对您的编码任务有所帮助！