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

Question

我正在学校学习如何使用 javascript 进行编程（如果我的术语不好，请原谅我。请随时纠正我。）我和一个四人小组正在创建一个站点。要求是我们必须有4个页面并且每个页面需要有某种循环，我们必须使用bootstrap，并且我们只能对所有页面使用一个js文件。我们正在使用 printToDom 函数在不同的页面上填充 bootstrap 卡片，但出于某种原因我无法让我的卡片工作。我想知道这是否与我们的代码设置方式有关，特别是我们正在使用的 for 循环。有没有一种方法可以将 if 语句合并到我们的 printToDom 将在不同页面上打印 for 循环的某些部分的位置？如果是这样，是否有一个术语或我可以查找以获得更多见解的东西？

编辑：我可能应该在我原来的 post 中这样说，但我正在考虑合并下面代码中看到的两个 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();

Answer 1

你可以使用方法window.location.pathname获取你所在的特定页面的名称，根据它你可以做类似的事情

const pageRoute = window.location.pathname

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

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

Javascript ES6 array loop that populates code only when on certain pages

javascript

arrays

for-loop

innerhtml