Question

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

这是我的密码。

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

所以我希望当我单击USA flag按钮时，动态页面将显示USA flag，反之亦然。

谢谢

Answer 1

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

Answer 2

只需将特定数据存储在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 个答案: