如何遍历对象并将其值附加到网页答案

【问题标题】：How can I loop through objects and append it's values to a webpage如何遍历对象并将其值附加到网页
【发布时间】：2019-08-07 09:17:19
【问题描述】：

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

这是我的代码。

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+ ' />);

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

谢谢

【问题讨论】：

似乎是一个不完整的答案，请提供更多细节和您到目前为止所做的努力
是的。我已经添加了更多信息，如果您需要更多信息，请告诉我。谢谢
你在这里错过了一个结束双引号 => imgURL: "photos.com/usa.jpg and imgURL: "photos.com/eu.jpg
@ShoyebSheikh 已更正
使用 window.location

标签： javascript jquery html loops javascript-objects

【解决方案1】：

只需将特定数据存储在 localStorage onclick 并重定向到可以获取该数据的另一个页面

<div>
  <p>USA</p>
  <Input type="button" value="View Flag" onclick="setDetails('usFlag')" />
  <p>EU</p>
  <Input type="button" value="View Flag" onclick="setDetails('euFlag')" />
</div>


    function setDetails(data) {

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

      var euFlag = {
        "name": "EU flag",
        "imgURL": "https://photos.com/eu.jpg"
      };

      if (data == 'usFlag') {
        localStorage.a = JSON.stringify(euFlag);
        console.log(localStorage.a);

      } else if (data == 'euFlag') {
        localStorage.a = JSON.stringify(euFlag);
        console.log(localStorage.a);
      }

     window.location = "dynamicpage.html";
    }

【讨论】：

【解决方案2】：

如果这些 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>

【讨论】：

这工作正常，但我希望它从对象中获取 IMG URL。因为问题中的代码不是我真正使用的代码，它只是一个简化版本