Most-favorites/about/goto2.js

function get_id(){
    var id =getParameterByName('id');
    console.log(id);
   
}

function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
     results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
   }
$(document).ready(function () {
    function get_data(i=0) {
      $.ajax({
        method: "GET",
        url: "../about.json",
        dataType: "json",
  
      })
        .done(function (msg) {
          var aboutContent = '';
          var aboutInt = '';
          var aboutImg = '';
          var aboutViedeo = '';
          console.log(msg[i]);
  
          // var res = msg.length;
          // console.log(res);
          // const limit = res;
          // 公司簡介
          aboutContent += ' \
                <div class="row px-0 mx-0">\
                    <div class="condition col-12 col-lg-4 bg-white">\
                        <h1 class="fs-3">接案條件 condition</h1>\
                        <table class="table">\
                            <tbody>\
                                <tr>\
                                    <th class="w-25" scope="row">接案區域</th>\
                                    <td>\
                                        '+ msg[i].WorkLoc + '\
                                    </td>\
                                </tr>\
                    <tr>\
                        <th scope="row">接案類型</th>\
                        <td>\
                            '+ msg[i].WorkType + '\
                        </td>\
                    </tr>\
                    <tr>\
                        <th scope="row">接案風格</th>\
                        <td>\
                            '+ msg[i].WorkStyle + '\
                        </td>\
                    </tr>\
                    <tr>\
                        <th scope="row">接案預算</th>\
                        <td>\
                            '+ msg[i].WorkBudget + '\
                        </td>\
                    </tr>\
                    <tr>\
                        <th scope="row">接案坪數</th>\
                        <td>\
                            '+ msg[i].WorkSize + '\
                        </td>\
                    </tr>\
                    <tr>\
                        <th scope="row">特殊接案</th>\
                        <td>\
                            '+ msg[i].WorkSoho + '\
                        </td>\
                    </tr>\
                            </tbody >\
                        </table >\
                    </div >\
                    <div style="background: url(../img/about/sec01/idea.webp);"\
                        class="idea col-12 col-lg-4 text-white">\
                        <h1 class="fs-3">設計理念 idea</h1>\
                        <table class="table table-borderless text-white">\
                            <tbody>\
                                <tr>\
                                    <td>\
                                        '+ msg[i].DesignIdea1 + '\
                                    </td>\
                                </tr>\
                                <tr>\
                                    <td>\
                                        '+ msg[i].DesignIdea2 + '\
                                    </td>\
                                </tr>\
                                <tr>\
                                    <td>\
                                        <p class="mb-2">｜擁有工程團隊｜</p>\
                                        '+ msg[i].DesignTeam + '\
                                    </td>\
                                </tr>\
                                <tr>\
                                    <td>\
                                        <p class="mb-2">｜設計師個人特質｜</p>\
                                        '+ msg[i].DesignerFeature + '\
                                    </td>\
                                </tr>\
                                <tr>\
                                    <td>\
                                        <p class="mb-2">｜設計與工程融合｜ </p>\
                                        '+ msg[i].DesignerEngineering + '\
                                    </td>\
                                </tr>\
                            </tbody>\
                        </table>\
                    </div>\
                    <div style="background: url(../img/about/sec01/contact.webp);"\
                        class="contact col-12 col-lg-4 text-white">\
                        <h1 class="fs-3">聯絡設計師 contact</h1>\
                        <table class="table text-white">\
                            <tbody>\
                                <tr>\
                                    <td class="w-75">\
                                        <span>免付費電話／</span>  '+ msg[i].TollFreeCall + '\
                                    </td>\
                                </tr>\
                                <tr>\
                                    <td>\
                                        <span>電話／</span>'+ msg[i].Telephone + '\
                                    </td>\
                                </tr>\
                                <tr>\
                                    <td>\
                                        <span>地址／</span>'+ msg[i].Address + '\
                                    </td>\
                                </tr>\
                                <tr>\
                                    <td>\
                                        <span>傳真／</span>'+ msg[i].Fax + '\
                                    </td>\
                                </tr>\
                                <tr>\
                                    <td>\
                                        <span>電子郵件／</span><a target="_blank" href="mailto:'+ msg[i].Email + '">' + msg[i].Email + '</a>\
                                    </td>\
                                </tr>\
                                <tr>\
                                    <td>\
                                        <span>網站／</span><a target="_blank" href="'+ msg[i].Web + '">' + msg[i].Web + '</a>\
                                    </td>\
                                </tr>\
                                <tr>\
                                    <td>\
                                        <span>Facebook:</span><a target="_blank" href="'+ msg[i].Facebook + '">' + msg[i].Facebook + '</a>\
                                    </td>\
                                </tr>\
                            </tbody>\
                        </table>\
                    </div>\
                </div >';
  
          aboutInt += ' \
                        <div class="banner-des row vertical align-items-end">\
                            <div class="col-3 pe-0">\
                                <img class="img-fluid" src="'+ msg[i].Designerimg + '" alt="">\
                            </div>\
                            <div class="banner-0 col-9 text-white">\
                                <div class="row">\
                                    <div class="banner-1 col-8 align-self-end">\
                                        <div style="font-weight: 900;" class="fs-2">'+ msg[i].WorkName + '</div>\
                                        <p><span class="fs-5">'+ msg[i].DesignerName + '</span>設計師</p>\
                                    </div>\
                                    <div class="banner-2 col-4">\
                                        <img src="../img/about/banner/title.png" alt="">\
                                    </div>\
                                </div>\
                            </div> \
                        </div>';
          console.log(msg[i].workimg.length)
          for (var j = 0; j < msg[i].workimg.length; j++) {
            aboutImg += ' \
                            <div class="secimg col-lg-4 mx-0 px-0">\
                                <img class="img-fluid" src="'+ msg[i].workimg[j].img + '" alt="">\
                                <p class="sec02-p-m p-1 mt-1 ">一起展開我們的浪漫混搭生活｜現代風｜28坪</p>\
                            </div>';
  
            aboutViedeo += ' \
                            <div class="secimg col-lg-4 mx-0 px-0">\
                                <img class="img-fluid" src="'+ msg[i].workimg[j].img + '" alt="">\
                                <p class="sec03-p-m p-1 mt-1 "> 渲染一室輕快寫意！紓壓水彩畫變成真實生活場景,室內設計其實與作畫有些許相似，透過室內設計師的手筆，衍生出千變萬化的居家風貌，有些宛若鮮豔渾厚的油畫，有些猶如輕簡優雅的水...</p>\
                            </div>';
          }
          
  
          $('.sec03-1').html(aboutViedeo);
          $('.sec02-1').html(aboutImg);
          $('.banner-des-about').html(aboutInt)
          $('.sec01').html(aboutContent);      
      });
    }
  
    get_data(0);
  
 
  
  

  
  });