第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

JavaScript：修改 DOM 并用 JSON 數(shù)據(jù)填充它

JavaScript：修改 DOM 并用 JSON 數(shù)據(jù)填充它

元芳怎么了 2023-09-28 17:01:01
第一次尋求幫助，所以如果我需要在特定部分展示自己，請指出！正如標(biāo)題中所述，我有一個(gè) JSON 數(shù)據(jù)庫，需要用它的內(nèi)容填充網(wǎng)站。第一次嘗試做這樣的事情（還在學(xué)習(xí)JS）。這是預(yù)期結(jié)果的圖像。如果您愿意，這就是 HTML 中的預(yù)期輸出：<div class="cardsection">  <div class="card">     <div class= "photoandname">      <div class="profilphoto">      </div>      <h2 class="name"> </h2>    </div>    <div class="informations">      <h3 class="location"> </h3>      <p class="caption"> </p>      <p class="price"> </p>    </div>    <div class="tags">      <button class="tagButton"> </button>      <button class="tagButton"> </button>     </div>  </div></div>我遇到的問題是：對于標(biāo)簽部分，每張卡沒有相同數(shù)量的標(biāo)簽。我知道我需要一個(gè)嵌套循環(huán)來訪問 JSON 數(shù)據(jù)中的嵌套數(shù)組。我嘗試了一些東西，但沒有完全管理或理解它是如何工作的，所以你們中的一個(gè)人可以幫助我并解釋或向我展示嗎？另外，我的 Items 循環(huán)的“for”部分一直有錯(cuò)誤（無法讀取未定義的屬性“長度”），但我沒有得到該錯(cuò)誤，因?yàn)樵搶傩允窃谏厦娑x的（var items = json.items;）我不能 100% 確定我的代碼是正確的。像我一樣編碼，它會(huì)正確地創(chuàng)建每張卡及其子卡嗎？（卡之間沒有相同的類名會(huì)誤導(dǎo)附加？并且正確設(shè)置了 aria-labels？）HTML 代碼： <div class="cardsection"> </div>
查看完整描述

2 回答

?
江戶川亂折騰

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超5個(gè)贊

https://jsfiddle.net/chille1987/s35qz4wf/

JavaScript

const jsonFile = { 

    "photographers": [

        {

            "name": "jonna",

            "id": 125,

            "city": "paris",

            "country": "UK",

            "tags": ["portrait", "events", "travel", "animals"],

            "tagline": "Doing my best",

            "price": 400,

            "portrait": "MimiKeel.jpg"

        }

     ]

};



var cardsection = document.getElementsByClassName("cardsection")[0];


var items = jsonFile;

console.log(items.photographers.length);


for(var i = 0; i < items.photographers.length; i++) {

  

  var card = document.createElement("div");

  card.classList.add('card');

  card.setAttribute("aria-label", "Photographe card");

  cardsection.appendChild(card);

  

  var photoandname = document.createElement("div");

  photoandname.classList.add('photoandname');

  photoandname.setAttribute("aria-label", "Profil photo and name section");

  photoandname.innerHTML = items.photographers[i].portrait;

  card.appendChild(photoandname);

  

  var profilphoto = document.createElement("img");

  profilphoto.src = items.photographers[i].portrait;

  profilphoto.alt = "Photographer's profil image";

  profilphoto.classList.add('profilphoto');

  photoandname.appendChild(profilphoto);

  

  var photographerName = document.createElement("H2");

  photographerName.classList.add('name');

  photographerName.textContent = items.photographers[i].name;

  photoandname.appendChild(photographerName);

  

  var informations = document.createElement("div");

  informations.classList.add('informations');

  card.appendChild(informations);

  

  var caption = document.createElement("p");

  caption.classList.add('caption');

  caption.textContent = items.photographers[i].tagline;

  informations.appendChild(caption);

  

  var price = document.createElement("p");

  price.classList.add('price');

  price.innerHTML = items.photographers[i].price; 

  informations.appendChild(price);

  

  var tags = document.createElement("div");

  tags.classList.add('tags');

  

    var tagItems = items.photographers[i].tags;

  console.log(tagItems)

  for(var j = 0; j < tagItems.length; j++) {

    

    var tagButton = document.createElement('button');

    tagButton.classList.add('tagButton');

    tagButton.id = tagItems[j]; /*ID needs to be the tag itself for a further filter functionality*/

    tagButton.textContent = tagItems[j]; /*And setting the innerhtml of the button as the tag itself*/

    tags.appendChild(tagButton);


  }   

  card.appendChild(tags);

}


查看完整回答
反對 回復(fù) 2023-09-28
?
喵喵時(shí)光機(jī)

TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個(gè)贊

javascript 看起來相當(dāng)不錯(cuò)（除了它應(yīng)該是json.photographers，而不是json.items）。但為什么要直接跳入大型重型模型呢？嘗試致力于

"photographers" : [ { "name" : "jonna" } ]

從小處開始，確保您的代碼有效，然后進(jìn)行擴(kuò)展。邁出一小步，就能完成更多事情。


查看完整回答
反對 回復(fù) 2023-09-28
  • 2 回答
  • 0 關(guān)注
  • 143 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)