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

Question

我在学校正在学习如何使用JavaScript（原谅我，如果我的术语是坏的。随意指正。）我和一队的四个创建站点进行编程。的要求，我们必须有4页，每页都需要有某种形式的循环，我们必须使用引导程序，我们只能使用一个js文件的所有页面。我们使用的是printToDom功能来填充在单独的页面引导卡，以及由于某种原因，我不能让我的工作。我想知道，如果这事做与我们的代码是如何设置的，特别是对于循环，我们正在使用。有没有办法，我可以加入一个if语句，它使到我们的printToDom将打印的某些部分进行循环时，在不同的页面？如果是的话是有它什么我可以看看，进一步了解术语？

编辑：我也许应该在原来的职位说这个，但我考虑合并两个for循环被看到在我的代码如下，因为目前我有2个独立的回路，但只有一个被填充的时旅游网页，另外一个应该填充在阵列最近的一些事件recentEvents但事实并非如此。我在JS小提琴测试它和代码在那里工作，所以我只是想知道为什么它会在何时沿侧js文件的代码的其余部分，我不知道不工作怎么句话我正在寻找

的javascript以下更多上下文 P>

    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();

Answer 1

您可以使用方法window.location.pathname 获取您所在的特定页面的名称，然后您可以执行类似的操作

const pageRoute = window.location.pathname

if(pageRoute == "page-one"){
    buildTourDates()
} else if(pageRoute == "page-two"){
    buildEvents()
}//so on...