Question

我正在尝试使用JavaScript为给定的JSON输入中包含的ID放置卡片，尽管这些分隔符和卡片存在于HTML中，但它们在实践中并未显示。谁能阐明这个问题？

我正在从事一个大学项目，为此，我们需要在Cordova中创建一个应用程序。我们的团队使用Onsen UI作为框架。

编辑：看来“ page__background page--material__background”这个部门正在阻碍我的卡片。基本上，它们是在其背后渲染的。我在CSS中尝试了z-index，但没有做任何事情。任何人都知道如何使这些卡在上面绘制。

        <ons-page id="policies-page">
            <style>
                .intro {
                text-align: center;
                padding: 0 20px;
                margin-top: 40px;
                }
                ons-card {
                cursor: pointer;
                color: #333;
                }
                .card__title,
                .card--material__title {
                font-size: 20px;
                }
            </style>
            <script>
                var jojo;
                var insertnode1, insertnode2, insertnode3;
                function cardGenerator() {
                    fetch('https://api.thesmokinggnu.net/api/policies')
                    .then(response => response.json())
                    .then(data=>{
                        console.log(data)
                        // Work with JSON data here
                        jojo = document.getElementById("policies-page");
                        for (policy of data.policies){
                            insertnode2 = document.createElement("DIV");
                            insertnode2.innerHTML = "<ons-card id='policycards' onclick='fn.pushPage({`id`: `policy_read.html`, `title`: `ID: "+policy.id+"`})'>"+policy.policyname+"</ons-card>"
                            jojo.appendChild(insertnode2);
                        }
                    })
                }
                cardGenerator();
                //<ons-card onclick='fn.pushPage({`id`: `policy_read.html`, `title`: `ID: "+policy.id+"`})'>"+policy.policyname+"</ons-card>
            </script>
        </ons-page>
    </template>```

In theory; this code, with the typical JSON input of 6 ids, should output 6 cards with the ID and other information. Instead, no cards. Not even an error.

Answer 1

在div内创建ons-page，然后在此div内添加卡片：

<ons-page id="policies-page">
 <div id="cards"></div> 
 <style>
   ...
 </style>
 <script>
   var jojo;
   var insertnode1, insertnode2, insertnode3;
   function cardGenerator() {
     fetch('https://api.thesmokinggnu.net/api/policies')
     .then(response => response.json())
     .then(data=>{
       console.log(data)
       // Work with JSON data here
       jojo = document.getElementById("cards");
       for (policy of data.policies){
         insertnode2 = document.createElement("DIV");
         insertnode2.innerHTML = "<ons-card ...</ons-card>"
         jojo.appendChild(insertnode2)
       }
     })
   }
   cardGenerator();
 </script>
</ons-page>

这是一个有效的代码段示例：

var jojo;
var insertnode1, insertnode2, insertnode3;
function cardGenerator() {
  let data = {policies:[
    {id:1, policyname: "policyname1"}, 
    {id:2, policyname: "policyname2"},
    {id:3, policyname: "policyname3"}
  ]}
  jojo = document.getElementById("cards");
  for (policy of data.policies){
    insertnode2 = document.createElement("DIV");
    insertnode2.innerHTML = "<ons-card>" + policy.policyname + "</ons-card>"
    jojo.appendChild(insertnode2);
   }
}
cardGenerator();

.intro {
  text-align: center;
  padding: 0 20px;
  margin-top: 40px;
}
ons-card {
  cursor: pointer;
  color: #333;
}
.card__title,
.card--material__title {
  font-size: 20px;
}

<link href="https://unpkg.com/onsenui/css/onsenui.css" rel="stylesheet"/>
<link href="https://unpkg.com/onsenui/css/onsen-css-components.css" rel="stylesheet"/>
<script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
 <ons-page id="policies-page">
 <div id='cards'></div>    
 </ons-page>

我们为什么需要这样做：在编译ons-page时，其中包含div。其中之一是div类的page__content，似乎我们只能看到div中的元素。当您追加到ons-page时，您将追加到div.page__content之外。这就是为什么我们看不到附加元素的原因。

温泉卡不显示？

1 个答案: