[英]How do I get multiple outputs from an object using Javascript in HTML?
我正在尝试使用过滤器输出对象属性的所有可能性。 用户选择游戏的平台和类型,并输出名称、图片和描述。 如果我有多个属于同一平台和类型的游戏,我希望将它们全部列出。 在控制台中,他们这样做,但是当我将它们输出到 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>
可以使用类似于以下过滤器功能的东西来实现您的目标。 您提供的代码存在一些问题,导致代码无法完成您想要的功能。
更新的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>
元素,这应该是使页面屏幕阅读友好的标题希望这对您的编码任务有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.