时间戳

首页 > 解决方案 > 如何遍历对象并将其值附加到网页

javascript - 如何遍历对象并将其值附加到网页

问题描述

目标：我正在创建一个两页网站，主页是静态页面，另一个是动态页面。我在主页上有许多按钮。我还有一个对象列表，我想遍历每个列表并将其附加到每个按钮，以便在单击按钮时对象的值将显示在动态页面上。

这是我的代码。

HTML。主页

<div>
     <p>USA</p>
    <Input type="button" value="View Flag" />
     <p>EU</p>
     <Input type="button" value="View Flag" />
</div>

动态页面

<div>
   <div class="flag"></div>
</div>

JavaScript/jQuery

//Objects 
var usFlag ={
     name: "USA flag",
     imgURL: "https://photos.com/usa.jpg"
 }

 var euFlag ={
     name: "EU flag",
     imgURL: "https://photos.com/eu.jpg
 }
 $(.'flag').append('<IMG src=' + imgURL+ ' />);

所以我希望当我点击美国国旗按钮时，动态页面将显示美国国旗，反之亦然。

谢谢

标签： javascriptjqueryhtmlloopsjavascript-objects

解决方案

如果那些 div 在同一个页面上，你可以这样做，

<div>
     <p>USA</p>
    <Input type="button" id="usa_button" value="View Flag" />
     <p>EU</p>
     <Input type="button" id="eu_button" value="View Flag" />
</div>
<div>
   <div class="flag"></div>
</div>
</a>
<script> 
//Objects 
var usFlag ={
     name: "USA flag",
     imgURL: "https://photos.com/usa.jpg"
 }

 var euFlag ={
     name: "EU flag",
     imgURL: "https://photos.com/eu.jpg"
 }  
jQuery('#usa_button').on('click',function(){
    jQuery('.flag').html('<img src="'+usFlag.imgURL+'">')
})
jQuery('#eu_button').on('click',function(){
    jQuery('.flag').html('<img src="'+euFlag.imgURL+'">')
})
</script>

推荐阅读