AI_Video_LP/static/js/vtubers.js

const data = [
    {
        "id": "0",
        "name": "宇宙喵 Kuroro",
        "intro": "lorem",
        "img": "https://www.tcbla.org.tw//img/16202921382044L6QIxJYF2J.jpg"
    },
    {
        "id": "1",
        "name": "達達與妃妃 DaiDai FeiFei",
        "intro": "lorem",
        "img": "https://www.tcbla.org.tw//img/162029083055025AVzgnnjV0.jpg"
    },
    {
        "id": "2",
        "name": "汪來汪趣 wdog",
        "intro": "lorem",
        "img": "https://www.tcbla.org.tw//img/162679825917082cO19F1hVS.jpg"
    },
    {
        "id": "3",
        "name": "左翌設計 ZoeL Design",
        "intro": "lorem",
        "img": "https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg"
    },
    {
        "id": "4",
        "name": "左翌設計 ZoeL Design",
        "intro": "lorem",
        "img": "https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg"
    },
    {
        "id": "5",
        "name": "左翌設計 ZoeL Design",
        "intro": "lorem",
        "img": "https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg"
    },
    {
        "id": "6",
        "name": "左翌設計 ZoeL Design",
        "intro": "lorem",
        "img": "https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg"
    },
];


function getVtuber() {
    if(window.location.pathname.match('vtuber')) {
      console.log('vtuber list');
      let result = [...data];
      console.log(result);
      let str = '';
      for(let i = 0; i < result.length; i++){
        str += `<div class="col-6 col-sm-4 col-md-3">
                    <div class="card" style="width: 100%;">
                        <div class="card-img-fr"><img class="card-img-top" src="${result[i].img}" alt="Card image cap"></div>
                        <div class="card-body">
                            <h5 class="card-title">${result[i].name}</h5>
                            <!-- <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> -->
                            <button class="card-link" data-toggle="modal" data-target="#more1Modal" data-id="${result[i].id}" >查看更多></button>
                        </div>
                    </div>
                </div>`;
      }
      $('.vt-list .vt-content').html(str);

      $('.vt-content .card-link').click(function(){
          let selected = result.filter(item => 
            item.id == $(this).data('id')
          )[0];
          console.log(selected);
          $('#more1Modal .modal-title').text(selected.name);
          $('#more1Modal .modal-imgfr img').attr('src', selected.img);
          $('#more1Modal .p').text(selected.intro);
      })
    }
}

getVtuber();