javascript - 使用 JavaScript 将带有数组的 JSON 文件上传到不同的选项卡

Question

我有来自 W3 Schools 的 HTML 模板，带有选项卡 - https://www.w3schools.com/howto/howto_js_tabs.asp和这个画廊 - https://www.w3schools.com/howto/howto_js_slideshow.asp 。我想上传一个包含不同数组的 JSON 文件。我尝试过不同的方法但没有任何效果。我是使用 JSON 文件的新手，但有一些使用 JavaScript 的经验。我希望当我单击其中一个按钮时显示 JSON 数组之一。但它只在我第一次打开文件时显示，然后什么也没有显示。我只想使用 Vanilla JavaScript。我没有在问题中包含我的 CSS，因为它已经太长了。如果你需要 CSS 我会展示它。有人可以帮我解决这个问题吗？这是我的 HTML:

<div class="tab">
    <button class="tabLinks" onclick="openDiv(event, 'overview'); appendData()" id="defaultOpen">Overview</button>
    <button class="tabLinks" onclick="openDiv(event, 'features')">Features</button>
    <button class="tabLinks" onclick="openDiv(event, 'requirements')">Requirements</button>
    <button class="tabLinks" onclick="openDiv(event, 'gallery')">Gallery</button>
</div>

<div id="mainContainer">
    <div class="tabContent" id="overview">
        <div id="overview-container">
        </div>
    </div>

    <div class="tabContent" id="features">
        <div id="features-container">
        </div>

    </div>

    <div class="tabContent" id="requirements">
        <div id="requirements-container">
        </div>
    </div>

    <div id="gallery" class="tabContent">
        <div id="gallery-container">
            <div class="slideshow">                             
                <div class="mySlides fade">
                </div>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
            </div>            
        </div>
    </div>
</div>

这是我的代码:

fetch("file.json")
.then (response => {
    return response.json();
})
.then (data => {
    return appendData(data);
})
.catch(err => {
    return console.log(err);
});

const appendData = data => {
    let mainContainer = document.getElementById("mainContainer");

    let overview = document.getElementById("overview");
    let features = document.getElementById("features");
    let requirements = document.getElementById("requirements");
    let gallery = document.getElementById("gallery");

    let overviewContainer = document.getElementById("overview-container");                
    let featuresContainer = document.getElementById("features-container");
    let requirementsContainer = document.getElementById("requirements-container");
    let galleryContainer = document.getElementById("gallery-container");

    if(appendData(overview)) {
        let jsonO = (data.overview);
        console.log(jsonO);
        for (i = 0; i < jsonO.length; i++) {
            overviewContainer.innerHTML += `<div class="tabContent" id="overview">
                                                <div id="overview-container">
                                                    <h3 class="h3">${jsonO[i].heading}</h3>
                                                    <p class="par">${jsonO[i].paragraph.replace(/\n/g, "<br>")}</p>
                                                </div>
                                            </div>
                                           `; 
            mainContainer.appendChild(overviewContainer);                  
        }
    } else if (features) {
        let jsonF = (data.features);
        console.log(jsonF);
        for (i = 0; i < jsonF.length; i++) {
            featuresContainer.innerHTML +=  `<div class="tabContent" id="features">
                                                <div id="features-container">
                                                    <h3 class="h3">${jsonF[i].heading}</h3>
                                                    <ul class="listStyle">
                                                        <li>${jsonF[i].list.replace(/\n/g, "<li>")}</li>
                                                    </ul>
                                            `; 
            mainContainer.appendChild(featuresContainer);     
        }
    } else if (requirements) {
        let jsonR = (data.requirements);
        console.log(jsonR);
        for (i = 0; i < jsonR.length; i++) {
            requirementsContainer.innerHTML +=  `<div class="tabContent" id="requirements">
                                                    <div id="requirements-container">
                                                        <h3 class="h3">${jsonR[i].heading}</h3>
                                                        <p class="par">${jsonR[i].paragraph.replace(/\n/g, "<br>")}</p>
                                                        <ul class="listStyle">
                                                            <li>${jsonR[i].list.replace(/\n/g, "<li>")}</li>
                                                        </ul>
                                                `;
            mainContainer.appendChild(requirementsContainer);          
        }
    } else if (gallery) {
        let jsonG = (data.gallery);
        console.log(jsonG);
        for (i = 0; i < jsonG.length; i++) {
            galleryContainer.innerHTML +=   `<div id="gallery" class="tabContent">
                                                <div id="gallery-container">
                                                    <div class="slideshow">                             
                                                        <div class="mySlides fade">
                                                            <img src="${jsonG[i].url}"  class="imageSlide"></a>
                                                        </div>
                                                    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                                                    <a class="next" onclick="plusSlides(1)">&#10095;</a>
                                                    </div>
                                                </div>
                                            </div>
                                            `; 
            mainContainer.appendChild(galleryContainer);          
        }
    }
}

这是我的 JSON 文件:

{
"overview": [    
    {
        "heading": "lorem",
        "paragraph": "ipsum"
    },
    {
        "heading": "dolor sit amet",
        "paragraph": "consectetur adipiscing"
    } 
],
"features": [
    {
        "heading": "FEATURES",
        "list": "Lorem ipsum\ndolor sit amet"
    },
    {
        "heading": "INCLUDES",
        "list": "consectetur adipiscing elit\nsed do eiusmod"
    }
],
"requirements": [
        {
            "heading": "MINIMUM SYSTEM REQUIREMENTS",
            "paragraph": "Lorem ipsum",
            "list": "Lorem ipsum\ndolor sit amet, consectetur\nadipiscing elit, sed"
        },
        {
            "heading": "",
            "paragraph": "Lorem ipsum dolor",
            "list": "sit amet, consectetur\nadipiscing elit, sed\ndo eiusmod tempor"
        }
],
"gallery": [
    {
        "url": "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
    }, 
    {
        "url": "https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg"
    },
    {
        "url": "https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg"
    }
]

}

这是选项卡和图库的代码:

let slideIndex = 1;
showSlides (slideIndex);
function plusSlides(n) {
    showSlides(slideIndex += n);
}
function currentSlide(n) {
    showSlides (slideIndex = n);
}
function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    let dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
        slideIndex = 1;
    }
    if (n < 1) {
        slideIndex = slides.length;
    }
    for (i = 0; i<slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i=0; i<dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active2", "");
    }
    slides[slideIndex-1].style.display = "block";
}
const openDiv = (evt, divName) => {
    // Declare all variables
    let i, tabContent, tabLinks;

    // Get all elements with class="tabContent" and hide them
    tabContent = document.querySelectorAll(".tabContent");
    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }

    // Get all elements with class="tabLinks" and remove the class "active"
    tabLinks = document.querySelectorAll(".tabLinks");
    for (i = 0; i < tabLinks.length; i++) {
        tabLinks[i].className = tabLinks[i].className.replace(" active", "");
    }       

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(divName).style.display = "block";
    evt.currentTarget.className += " active";

}
document.querySelector("#defaultOpen").click();

CSS 文件:

        /* Gallery Style */
        .slideshow-container {
            max-width: 1000px;
            position: relative;
            margin: auto;
        }

        /* Hide the images by default */
        .mySlides {
            display: none;
        }

        .imageSlide {
            text-align: center;
            max-width: 100%;
            display: block;
            margin: 0px auto;
        }

        /* Next & previous buttons */
        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            margin-top: -22px;
            padding: 16px;
            color: #d1143e;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
        }

        /* Position the "next button" to the right */
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover, .next:hover {
            background-color: rgba(0,0,0,0.8);
        }

        /* The dots/bullets/indicators */
        .dot {
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #212529;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        .active2, .dot:hover {
            background-color: #d1143e;
        }

        /* Fading animation */
        .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1.5s;
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @-webkit-keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
        }

        @keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
        }

        /* Paragraphs and Headings */
        .h3 {
            font-family: 'Fira Sans', sans-serif;
            text-align: center;
        }

        .par {
            font-family: 'Fira Sans', sans-serif;
            text-align: justify;
        }

        /* Tabs */
        .tab {
            text-align: center;
            position: relative;
            top: 0;
            z-index: 1;
            justify-content: center;
            background-color: #ccc;
            overflow: hidden;
            flex-direction: row;
            width: 100%;     
        }

        .tabLinks {
            border: 10px;
            border-color: transparent;
            margin: 5px;
            color: #000000;
            text-align: center;
            padding: 14px 16px;
            background-color: transparent;
            cursor: pointer;
            font-weight: bold;
            font-family: 'Fira Sans', sans-serif;
            font-size: 17px;
            text-decoration: none;
            text-transform: uppercase;
            position: relative;
        }

        .tabLinks:hover, .tabLinks:active {
            color: rgb(209, 20, 62);
        }

        .tabContent {
            padding-top: 10px;
        }

        /* List style */
        .listStyle {
            list-style: none;
            font-size: 16px;
            font-family: 'Fira Sans', sans-serif;
        }

        .listStyle li::before {
            content: "•";
            color: rgb(209, 20, 62);
            font-weight: bold;
            width: 1em;
            margin-left: -1em;
            list-style-position: outside;
            padding-right: 10px;
            padding-left: 15px;
        }

我的 fiddle :https://jsfiddle.net/0x7cgmr8/5/

Answer 1

我做了一个fiddle基于您的代码，因为您当前的代码有几个问题，并且对我来说似乎无法挽救。编辑了 HTML 和 JS，没有对 CSS 进行任何更改。

let slideIndex = 1;

function ready(fn) {
    if (document.readyState !== 'loading') {
        fn();
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}

function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    let dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
        slideIndex = 1;
    }
    if (n < 1) {
        slideIndex = slides.length;
    }
    for (i = 0; i<slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i=0; i<dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active2", "");
    }
    slides[slideIndex-1].style.display = "block";
}

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

const openDiv = (evt, divName) => {
    // Declare all variables
    let i, tabContent, tabLinks;

    // Get all elements with class="tabContent" and hide them
    tabContent = document.querySelectorAll(".tabContent");
    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }

    // Get all elements with class="tabLinks" and remove the class "active"
    tabLinks = document.querySelectorAll(".tabLinks");
    for (i = 0; i < tabLinks.length; i++) {
        tabLinks[i].className = tabLinks[i].className.replace(" active", "");
    }       

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(divName).style.display = "block";
    evt.currentTarget.className += " active";

};

const appendData = data => {
    let overviewContainer = document.getElementById("overview-container"),
    	featuresContainer = document.getElementById("features-container"),
        requirementsContainer = document.getElementById("requirements-container"),
        galleryContainer = document.getElementById("gallery-container");

    Object.entries(data).forEach(([key, value]) => {
        if (key === 'overview') {
            for (let i = 0; i < value.length; i++) {
                overviewContainer.innerHTML += `
                    <h3 class="h3">${value[i].heading}</h3>
                    <p class="par">${value[i].paragraph.replace(/\n/g, "<br>")}</p>
                `;
            }
        } else if (key === 'features') {
            for (let i = 0; i < value.length; i++) {
                featuresContainer.innerHTML +=  `
                    <h3 class="h3">${value[i].heading}</h3>
                    <ul class="listStyle">
                        <li>${value[i].list.replace(/\n/g, "<li>")}</li>
                    </ul>
                `;
            }
        } else if (key === 'requirements') {
            for (let i = 0; i < value.length; i++) {
                requirementsContainer.innerHTML +=  `
                    <h3 class="h3">${value[i].heading}</h3>
                    <p class="par">${value[i].paragraph.replace(/\n/g, "<br>")}</p>
                    <ul class="listStyle">
                        <li>${value[i].list.replace(/\n/g, "<li>")}</li>
                    </ul>
                `;         
            }
        } else if (key === 'gallery') {
            for (let i = 0; i < value.length; i++) {
                galleryContainer.innerHTML +=   `
                    <div class="slideshow">                             
                        <div class="mySlides fade">
                            <img src="${value[i].url}"  class="imageSlide"></a>
                        </div>
                        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                        <a class="next" onclick="plusSlides(1)">&#10095;</a>
                    </div>
                `;       
            }
        }
    });
};

ready(() => {

    fetch("https://api.myjson.com/bins/zumxy")
    .then (response => {
        return response.json();
    })
    .then (data => {
        appendData(data);
        document.querySelector("#defaultOpen").click();
        showSlides(slideIndex);
    })
    .catch(err => {
        return console.log(err);
    });

});

 /* Gallery Style */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

.imageSlide {
    text-align: center;
    max-width: 100%;
    display: block;
    margin: 0px auto;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: #d1143e;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #212529;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active2, .dot:hover {
    background-color: #d1143e;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

@keyframes fade {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* Paragraphs and Headings */
.h3 {
    font-family: 'Fira Sans', sans-serif;
    text-align: center;
}

.par {
    font-family: 'Fira Sans', sans-serif;
    text-align: justify;
}

/* Tabs */
.tab {
    text-align: center;
    position: relative;
    top: 0;
    z-index: 1;
    justify-content: center;
    background-color: #ccc;
    overflow: hidden;
    flex-direction: row;
    width: 100%;
}

.tabLinks {
    border: 10px;
    border-color: transparent;
    margin: 5px;
    color: #000000;
    text-align: center;
    padding: 14px 16px;
    background-color: transparent;
    cursor: pointer;
    font-weight: bold;
    font-family: 'Fira Sans', sans-serif;
    font-size: 17px;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
}

.tabLinks:hover, .tabLinks:active {
    color: rgb(209, 20, 62);
}

.tabContent {
    padding-top: 10px;
}

/* List style */
.listStyle {
    list-style: none;
    font-size: 16px;
    font-family: 'Fira Sans', sans-serif;
}

.listStyle li::before {
    content: "•";
    color: rgb(209, 20, 62);
    font-weight: bold;
    width: 1em;
    margin-left: -1em;
    list-style-position: outside;
    padding-right: 10px;
    padding-left: 15px;
}

<div class="tab">
    <button class="tabLinks" onclick="openDiv(event, 'overview');" id="defaultOpen">Overview</button>
    <button class="tabLinks" onclick="openDiv(event, 'features')">Features</button>
    <button class="tabLinks" onclick="openDiv(event, 'requirements')">Requirements</button>
    <button class="tabLinks" onclick="openDiv(event, 'gallery')">Gallery</button>
</div>

<div id="mainContainer">
    <div class="tabContent" id="overview">
        <div id="overview-container">
        </div>
    </div>

    <div class="tabContent" id="features">
        <div id="features-container">
        </div>

    </div>

    <div class="tabContent" id="requirements">
        <div id="requirements-container">
        </div>
    </div>

    <div id="gallery" class="tabContent">
        <div id="gallery-container">       
        </div>
    </div>
</div>