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

//对象
var usFlag={
名称：“美国国旗”，
imgURL:“https://photos.com/usa.jpg"
}
瓦尔尤弗拉格={
名称：“欧盟国旗”，
imgURL:“https://photos.com/eu.jpg
}
$（.'flag'）。追加（'）；

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

---

谢谢

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

美国

欧盟

//物体
var usFlag={
名称：“美国国旗”，
imgURL:“https://photos.com/usa.jpg"
}
瓦尔尤弗拉格={
名称：“欧盟国旗”，
imgURL:“https://photos.com/eu.jpg"
}  
jQuery（“#usa_按钮”）。在（'click'，function（）上{
jQuery（'.flag'）.html（''）
})
jQuery（“#eu_按钮”）。在（'click'，function（）上{
jQuery（'.flag'）.html（''）
})

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

美国

欧盟

//物体
var usFlag={
名称：“美国国旗”，
imgURL:“https://photos.com/usa.jpg"
}
瓦尔尤弗拉格={
名称：“欧盟国旗”，
imgURL:“https://photos.com/eu.jpg"
}  
jQuery（“#usa_按钮”）。在（'click'，function（）上{
jQuery（'.flag'）.html（''）
})
jQuery（“#eu_按钮”）。在（'click'，function（）上{
jQuery（'.flag'）.html（''）
})

只需在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";
    }

美国

欧盟

函数设置详细信息（数据）{
var usFlag={
“名称”：“美国国旗”，
“imgURL”：https://photos.com/usa.jpg"
};
变量euFlag={
“名称”：“欧盟国旗”，
“imgURL”：https://photos.com/eu.jpg"
};
如果（数据=='usFlag'）{
localStorage.a=JSON.stringify（euFlag）；
log（localStorage.a）；
}else if（数据=='euFlag'）{
localStorage.a=JSON.stringify（euFlag）；
log（localStorage.a）；
}
window.location=“dynamicpage.html”；
}

只需在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";
    }

美国

欧盟

函数设置详细信息（数据）{
var usFlag={
“名称”：“美国国旗”，
“imgURL”：https://photos.com/usa.jpg"
};
变量euFlag={
“名称”：“欧盟国旗”，
“imgURL”：https://photos.com/eu.jpg"
};
如果（数据=='usFlag'）{
localStorage.a=JSON.stringify（euFlag）；
log（localStorage.a）；
}else if（数据=='euFlag'）{
localStorage.a=JSON.stringify（euFlag）；
log（localStorage.a）；
}
window.location=“dynamicpage.html”；
}

似乎是一个不完整的答案，请提供您迄今为止所做的更多详细信息和努力是的。我已经添加了更多信息，如果您需要更多信息，请告诉我。谢谢您错过了此处的结束双引号=>imgURL:“和imgURL:“@ShoyebSheikh correcteduse window.location似乎是一个不完整的答案，请提供您迄今为止所做的更多细节和努力是的。我已经添加了更多信息，如果你需要更多，请告诉我。谢谢，您错过了此处的结束双引号=>imgURL:“和imgURL:@ShoyebSheikh correcteduse window.location这工作正常，但我希望它从对象获取IMG URL。因为问题中的代码不是我使用的真正代码，它只是一个简化版本。这很好，但我希望它从对象中获取IMG URL。因为问题中的代码不是我使用的真正代码，它只是一个简化版本