javascript - 仅在某些页面上填充代码的 Javascript ES6 数组循环

问题描述

我在学校目前正在学习如何使用 javascript 编程（如果我的术语不好，请原谅我。请随时纠正我。）我自己和一个四人团队正在创建一个站点。要求是我们必须有 4 个页面，每个页面需要有某种循环，我们必须使用引导程序，并且我们只能为所有页面使用一个 js 文件。我们正在使用 printToDom 函数在单独的页面上填充引导卡，由于某种原因，我无法让我的工作。我想知道这是否与我们的代码设置方式有关，特别是我们正在使用的 for 循环。有没有一种方法可以合并一个 if 语句，使它在我们的 printToDom 将在不同页面上打印某些部分的 for 循环？如果是这样，是否有一个术语或我可以查找以获得更多洞察力的东西？

编辑：我可能应该在我的原始帖子中说过这一点，但我正在考虑合并下面代码中看到的两个 for 循环，因为目前我有 2 个单独的 for 循环，但在游览页面上只有一个被填充，另一个应该从数组中填充一些最近的事件recentEvents但它没有。我在 JS fiddle 中对其进行了测试，并且代码在那里工作，所以我只是想知道为什么它在 js 文件中与其余代码一起时不起作用，我不知道如何表达我正在寻找的内容.

下面的 javascript 以获得更多上下文

    const tourStops=[
    {           location: "Denver, Colorado ",
                venue: " Pepsi Center ",
                date: "MON 04/20/2020",
                id: 1
    },
    {
                location: "Las Vegas, Nevada",
                venue: " Flamingo Hotel",
                date: "FRI 04/24/2020",
                id: 2
    },
    {
                location: "Hollywood, California",
                venue: " Troubadour ",
                date: "SAT  05/02/2020",
                id: 3
    },
    {
                location: "Portland,Oregon",
                venue: " Moda Center ",
                date: "FRI  05/15/2020",
                id: 4
    },
    {
                location: "Washington, D.C. ",
                venue: " Capital One Arena",
                date: "FRI  05/22/2020",
                id: 5
    },
    {
                location: "Bangor, Maine ",
                venue: " Darlings Waterfront",
                date: "FRI  06/05/2020",
                id: 6
    },
    {
                location: "Boston, Massachusetts",
                venue: " Wilbur Theater ",
                date: "SAT  06/20/2020",
                id: 7
    },
    {
                location: "Anchorage, Alaska ",
                venue: "Atwood Concert Hall",
                date: "THU  07/09/2020",
                id: 8
    }
    ];



    const printToDom =(divId,textToPrint)=>{
    const selectedDiv= document.getElementById(divId);
    selectedDiv.innerHTML= textToPrint;
    };


    const buildTourDates=()=>{
        let domString='';
        for(let i = 0; i <tourStops.length;i++){
            domString += '<div class="container px-lg-5">';
            domString += '<div class="row mx-lg-n5">';
            domString += `<div class="col py-3 px-lg-5 border">${tourStops[i].date}</div>`;
            domString += `<div class="col py-3 px-lg-5 border">${tourStops[i].location}</div>`;
            domString += `<div class="col py-3 px-lg-5 border">${tourStops[i].venue}</div>`;
            domString += `<a class="btn btn-success border" href="https://www.ticketnetwork.com/en/concerts" role="button" id= "tickets" onclick= "btnPurchase(${tourStops[i].id})" class="btn btn-success border">Purchase Tickets</a>`;
            domString += '</div>';
            domString += '</div>';
    }
    printToDom('tourdates',domString)
    };


    const btnPurchase= (id)=>{
     for(let i=0; i < tourStops.length; i++){  
         if(tourStops[i].id === id) {
    return;
}
  }
    };

    const eventsForTickets = () => {
        document.getElementById("tickets").addEventListener('click', btnPurchase);
    };


    const recentEvents = [
        {
            event: "New Tour!",
            para: "text to be inserted into this event. Lorum ipsum to see how more text looks.",
            img: ""
        },
        {
            event: "New Album",
            para: "text to be inserted into this event. Lorum ipsum to see how more text looks.",
            img: ""
        },
        {
            event: "Something",
            para: "text to be inserted into this event. Lorum ipsum to see how more text looks.",
            img: ""
        },

    ];



    const buildEvents = () => {
        let domString='';
        for(let i = 0; i < recentEvents.length; i++){
            domString += `<div class="media">`;
            domString += `<img src="..." class="mr-3" alt="...">`;
            domString += `<div class="media-body">`;
            domString += ` <h5 class="mt-0">${recentEvents[i].event}</h5>`;
            domString += `${recentEvents[i].para}`;
            domString += `</div>`;
            domString += `</div>`;
        }
    printToDom('newEvents',domString)
    };


    const initTour=()=> {
     buildTourDates(tourStops);
     eventsForTickets();
    };

    const initIndex=()=>{
        buildEvents(recentEvents);
    }

    initTour();
    initIndex();

标签： javascriptarraysfor-loopinnerhtml

javascript - 仅在某些页面上填充代码的 Javascript ES6 数组循环

问题描述

解决方案

推荐阅读