Question

我通过Javascript解析JSON数据，这样我就可以构建一个包含图像和网址的目录。我想将一些网址显示为超链接，一些显示为图标 - 而不是仅显示网址的文本地址。我使用createElement（）和appendChild（）来渲染其他html元素。

第一张附加图片（仅限HTML和CSS）是我试图让它看起来的方式（右边的列），但现在使用Javascript来显示JSON数据1 < / p>

第二个是我目前所处的位置 - 它是我试图解决的右侧列。2

HTML :(我已经遗漏了剩下的代码但是如果需要的话我可以加入它吗？）

<div class="directory-container">
<div class="img-wrap">
<div id="imagehere"></div>
</div>
<section>      
</section>
<div id="column-4-links" >   
</div>
</div>

Javascript：

<script>     
var section = document.querySelector('section');
var requestURL = 'directory.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'text';
request.send();

request.onload = function() {
var directoryText = request.response;
var directory = JSON.parse(directoryText);
showListings(directory);
}

function showListings(jsonObj) {
var listings = jsonObj['eateries'];
for(var i = 0; i < listings.length; i++) {
var myArticleRight = document.createElement('article');              
var myDescriptionWrap = document.createElement('div');
var myHeading = document.createElement('div'); 
var myH1 = document.createElement('h1');                 
var myH4 = document.createElement('h4');
var myContactWrap = document.createElement('div');  
var myLinksDiv = document.createElement('div');
var myMenu = document.createElement('div'); 
var myMenuLink = document.createElement('a');   

myH4.textContent = listings[i].open;
myH1.textContent = listings[i].name;
myMenu.textContent = 'Menu';
myMenuLink.textContent = listings[i].menu; 

document.getElementById("imagehere").innerHTML = `
${listings.map(heroImage).join("")}
`;

function heroImage(listings) {
return `  
<img  src="${listings.heroImgLocation}">  
`;
}    

listings[i].onclick=function(){
var myMenuLink = document.createElement('a');

document.getElementById("column-4-links").innerHTML = `
${listings.map(aMenu).join("")}
`;

function aMenu(listings) {
return `
<div class="button-website w-col w-col-4 w-col-small-small-stack">
<a href="${listings.menu}" class="mobile-button desktop-button-to-link w-button">
<span class="desktop-get-directions desktop-cta-buttons">${listings.menuDescription}
<span class="font-awesome w-hidden-small w-hidden-tiny"></span></span></a>
</div>
`;}   

section.appendChild(myArticleRight).className = "tablet-right mobile-right full-image-gallery-right";          
myArticleRight.appendChild(myDescriptionWrap).className = "wrap-descr t-wrap-descr m-wrap-descr no-bg"; 
myDescriptionWrap.appendChild(myHeading).className = "desktop-listing-intro-wrap mobie-listing-intro-wrap";          
myDescriptionWrap.appendChild(myH4).className = "desktop-open-for-breaky tablet-open-for-breaky mobile-open-for-breaky";
myDescriptionWrap.appendChild(myH1).className = "mobile-listing-heading desktop-listing-heading";   
myArticleRight.appendChild(myContactWrap).className = "wrap-contact t-wrap-contact no-bg no-solid-border";      
myContactWrap.appendChild(myLinksDiv).className = "m-ctas d-ctas w-row";  
myLinksDiv.appendChild(myMenu).className = "button-website w-col w-col-4 w-col-small-small-stack";   
myMenu.appendChild(myMenuLink).className = "mobile-button desktop-button-to-link w-button";   
</script>

JSON数据示例：

{
"eateries" : [
{
"name" : "Kepos and Co",
"locationCuisine" : "Middle Eastern • Waterloo • $$",
"listingDescription" : "Rising Sun Workshops knits together an unlikely pair; a motorcycle garage and ramen. As a social enterprise and novel concept it was crowdfunded by fellow riders, with profits subsidising membership fees. It’s a laidback industrial space, with wifi and plenty of laptops in use. And they’ll make a vegan ramen for you if you ask for it. Sit downstairs to watch members tinker away at their bikes.",
"veganFeatures" : [
"Bonsoy Soy Milk"
],
"vegetarianFeatures" : [
"Protein",
" • Free Range Eggs"
],        
"generalFeatures" : [
" • Free Wifi",
" • Liscenced",
" • Open Late",
" • Dog Friendly",
" • Outdoor Seating"
],
"open" : "Open for Breakfast, Lunch and Dinner",
"heroImgLocation": "http://uploads.webflow.com/5a0d327ff2f99e00014ad192/5a73f283c14f9b0001c2bffc_7Q4A5552-500x650.jpg",     
"website" : "https://www.keposandco.com.au",
"websiteDescription" : "Website",          
"menu" : "https://www.keposandco.com.au/menu",
"menuDescription" : "Menu",        
"instagram" : "https://www.instagram.com/keposstreetkitchen",
"facebook" : "https://www.facebook.com/KeposandCo"           
},
{
"name" : "Marys Burger",
"locationCuisine" : "Burgers • Newtown • $",
"listingDescription" : "Mary's is a dive bar with a bare-bones fit out, graffiti adorned walls and whiskey bottle light fittings - a shout out to 90s era Newtown. Famous for their classic American dude food, best washed down with a beer.",
"veganFeatures" : [
" Alcohol • Protein • Soy Milk • Almond Milk"
],      
"vegetarianFeatures" : [
"Protein"
],          
"generalFeatures" : [
" • Family Friendly",
" • BYO",
" • Open Late",
" • Dog Friendly",
" • Outdoor Seating"
],
"open" : "Open for Breakfast, Lunch and Dinner",
"heroImgLocation": "https://uploads-ssl.webflow.com/5a0d327ff2f99e00014ad192/5a77f6984323220001d7c4cd_7Q4A5530.jpg",
"website" : "http://www.getfat.com.au/",
"websiteDescription" : "Website",
"menu" : "http://www.getfat.com.au/menu/",
"menuDescription" : "Menu",        
"instagram" : "https://www.instagram.com/marysnewtown",
"facebook" : ""           
}
]
}

Answer 1

您可以创建如下元素：

var myMenuLink = document.createElement('a');

使用.setAttribute（）创建属性href或其他：

myMenuLink.setAttribute('href', 'myUrl.com');

锚文本：

myMenuLink.text = "My anchor text";

然后：

someElement.appendChild(myMenuLink);

图片链接如下：

<a href="example.com"><img src="image.jpg"></a>

然后：

var image = document.createElement('img');

image.setAttribute("src", "someImage.jpg");

myMenuLink.appendChild(image);//Where myMenuLink is an "a" element

要添加字体很棒，它可以使用span或i元素

var image = document.createElement('span');

    image.setAttribute("cass", "fab fa-instagram");

    myMenuLink.appendChild(image);//myMenuLink is an "a" element

JSON＆amp; Javascript：当使用createElement（）和appendChild（）时，如何显示超链接和图标而不是url文本地址？

1 个答案: