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

Posted 2023-05-07

【中文标题】仅在某些页面上填充代码的 Javascript ES6 数组循环

【英文标题】：Javascript ES6 array loop that populates code only when on certain pages

【发布时间】：2020-05-30 19:22:55

【问题描述】：

我在学校正在学习如何使用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" >`;
            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();

【问题讨论】：

您可以creste的你在jsfiddle.net或在这里codepen.io尝试工作的例子。把你们各自的HTML，CSS和JS在各自的地方.. SPAN>

【参考方案1】：

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

const pageRoute = window.location.pathname

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

【讨论】：

那么你有“第一页”的地方我会放文件路径吗？

我试试看！