Most-favorites/about/goto2.js

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 () {
    var id = getParameterByName('id');
    console.log(id);

    function get_data() {
        $.ajax({
            method: "GET",
            url: "../designer4.json",
            dataType: "json",

        })
            .done(function (msg) {
                for (var i = 0; i < msg.length; i++) {
                    if (msg[i].id == id) {
                        var aboutContent = '';
                        var aboutInt = '';
                        var aboutImg = '';
                        var aboutViedeo = '';
                        var aboutMethod = '';
                        var aboutIntPhone = '';
                        var bodyBannerDes = '';
                        var webtitle='';
                        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 pb-3"><span style="color:#8DC21F" class="fw-bold fs-2">|</span>接案條件 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);  background-size: cover; background-repeat: no-repeat;"\
                        class="idea col-12 col-lg-4 text-white">\
                        <h1 class="fs-3 pb-3"><span style="color:#8DC21F" class="fw-bold fs-2">|</span>設計理念 idea</h1>\
                        <table class="table table-borderless text-white">\
                        <tbody>\
                            <tr>\
                                <td>\
                                    '+ msg[i].DesignIdea1 + '\
                                </td>\
                            </tr>\
                        </tbody>\
                    </table>\
                    </div>\
                    <div style="background: url(../img/about/sec01/contact.webp);  background-size: cover;  background-repeat: no-repeat;"\
                        class="contact col-12 col-lg-4 text-white">\
                        <h1 class="fs-3 pb-3"><span style="color:#8DC21F" class="fw-bold fs-2">|</span>聯絡設計師 contact</h1>\
                        <table class="table text-white">\
                            <tbody>\
                                <tr>\
                                <th scope="row" class="">免付費電話／</th>\
                                    <td class="">\
                                    <a target="_blank" href="tel: '+ msg[i].TollFreeCall + '"> '+ msg[i].TollFreeCall + '</a>\
                                    </td>\
                                </tr>\
                                <tr>\
                                <th scope="row" class="">電.&emsp;&emsp;&ensp;話／</th>\
                                    <td>\
                                       '+ msg[i].Telephone + '\
                                    </td>\
                                </tr>\
                                <tr>\
                                <th scope="row" class="">地.&emsp;&emsp;&ensp;址／</th>\
                                    <td>\
                                        '+ msg[i].Address + '\
                                    </td>\
                                </tr>\
                                <tr>\
                                <th scope="row" class="">傳.&emsp;&emsp;&ensp;真／</th>\
                                    <td>\
                                       '+ msg[i].Fax + '\
                                    </td>\
                                </tr>\
                                <tr>\
                                    <th scope="row" class="">電&thinsp;子&thinsp;郵&thinsp;件／</th>\
                                    <td>\
                                        <a target="_blank" href="mailto:'+ msg[i].Email + '">' + msg[i].Email + '</a>\
                                    </td>\
                                </tr>\
                                <tr>\
                                <th scope="row" class="">網.&emsp;&emsp;&ensp;站／</th>\
                                    <td>\
                                        <a target="_blank" href="'+ msg[i].Web + '">' + msg[i].Web + '</a>\
                                    </td>\
                                </tr>\
                                <tr>\
                                <th scope="row" class="">Facebook:</th>\
                                    <td>\
                                        <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="banner-3 col-2 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-9 align-self-end pb-3">\
                                        <div style="font-weight: 900;" class="fs-2">'+ msg[i].WorkName + '</div>\
                                        <p><span class="fs-5">'+ msg[i].DesignerName + '</span>設計師</p>\
                                        <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ msg[i].TollFreeCall + '"><img class="" src="../img/phone.png" alt=""></a>\</button>\
                                        <button type="button" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal">私訊</button>\
                                    </div>\
                                    <div class="banner-2 col-3 row justify-content-end px-0">\
                                    </div>\
                                </div>\
                            </div> \
                        </div>';
                        aboutIntPhone += ' \
                        <div class="banner-m row vertical align-items-end px-0 mx-0">\
                        <div class="bannerm-0 col-12 my-5 px-0">\
                        <a href="../index.html"><img class="img-fluid" src="../img/banner/banner-mobile.png" alt=""></a>\
                        </div>\
                            <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
                                <img class="img-fluid" src="'+ msg[i].Designerimg + '" alt="">\
                            </div>\
                            <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start pb-3">\
                                <div class="banner1-1 pt-3 pb-1" style="font-weight: 900;">'+ msg[i].WorkName + '</div>\
                                <p class=""><span class="fs-5">'+ msg[i].DesignerName + '</span>設計師</p>\
                                <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ msg[i].TollFreeCall + '"><img class="" src="../img/phone.png" alt=""></a>\</button>\
                                <button type="button" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal">私訊</button>\
                             </div>\
                        </div>';

                     
                        for (var j = 0; j < msg[i].workimg.length; j++) {
                            aboutImg += ' \
                            <div class="secimg col-lg-4 mx-0 px-0">\
                            <a target="_blank" href="'+ msg[i].workimg[j].workSrc + '"><img class="img-fluid" src="' + msg[i].workimg[j].img + '" alt=""></a>\
                                <div class="sec02-p-m p-1 mt-1 text-center">\
                                <p>'+ msg[i].workimg[j].text + '</p>\
                                <a target="_blank" href="'+ msg[i].workimg[j].workSrc + '"><div class="sec03-img-m1"><img class="play1"  src="../img/arrow.png" alt=""></div></a>\
                                </div>\
                            </div>';

                        }
                            var j =0;
                       
                            if (msg[i].workVideo[j]==undefined) {
                                aboutViedeo += ' \
                                <div id="sec05" class="sec05-row row align-items-center h-100 mx-0 w-100 px-0" style=" background: rgba(0, 0, 0, 0.8);text-align: center;">\
                                <div style="padding:20vw 0px">\
                                    <h1 class="align-self-center" style="color:#86B81D;">Stay tuned !</h1>\
                                    <p class="align-self-center" style="color:#fff;  letter-spacing: 5px;">...敬請期待...</p>\
                                </div>\
                            </div>';
                            } else {
                            for (var j = 0; j < msg[i].workVideo.length; j++) {
                                aboutViedeo += ' \
                                <div class="secimg col-lg-4 p-0">\
                                <a target="_blank" href="'+ msg[i].workVideo[j].videoSrc + '"><img class="img-fluid" src="' + msg[i].workVideo[j].video + '" alt=""></a>\
                                    <div class="sec03-p-m p-1 mt-1 text-center">\
                                    <p class="mb-1">'+ msg[i].workVideo[j].videotext + '</p>\
                                    <a target="_blank" href="'+ msg[i].workVideo[j].videoSrc + '"><div class="sec03-img-m1"><img class="play1"  src="../img/play.png" alt=""></div></a>\
                                    </div>\
                                </div>';
                            }
                        }
                        var j =0;
                        if (msg[i].workMethod[j]==undefined) {
                            aboutMethod += ' \
                            <div id="sec05" class="sec05-row row align-items-center h-100 mx-0 w-100 px-0" style=" background: rgba(0, 0, 0, 0.8);text-align: center;">\
                            <div style="padding:20vw 0px">\
                                <h1 class="align-self-center" style="color:#86B81D;">Stay tuned !</h1>\
                                <p class="align-self-center" style="color:#fff;  letter-spacing: 5px;">...敬請期待...</p>\
                            </div>\
                        </div>';
                        } else {
                            for (var j = 0; j < msg[i].workMethod.length; j++) {
                                aboutMethod += ' \
                                <div class="secimg col-lg-4 p-0">\
                                <a target="_blank" href="'+ msg[i].workMethod[j].Methodsrc + '"><img class="img-fluid" src="' + msg[i].workMethod[j].Methodimg + '" alt=""></a>\
                                <div class="sec04-p-m p-1 mt-1 text-center">\
                                    <p>'+ msg[i].workMethod[j].Methodtext + '</p>\
                                    <a target="_blank" href="'+ msg[i].workimg[j].workSrc + '"><div class="sec03-img-m1"><img class="play1"  src="../img/arrow.png" alt=""></div></a>\
                                    </div>\
                                </div>';
                            }
                        }

                        bodyBannerDes += ' \
                        <img class="banner-img" id="img_id"  src="'+ msg[i].workimg[0].img + '" alt="">\
                       ';
                       webtitle += ' \
                       幸福空間::: 2022 觀眾最愛設計師 | 滿足你期待回家的夢想推手|'+ msg[i].DesignerName +'設計師\
                      ';

                        $('.sec03-1').html(aboutViedeo);
                        $('.sec02-1').html(aboutImg);
                        $('.banner-des-about').html(aboutInt);
                        $('.sec01').html(aboutContent);
                        $('.sec04-1').html(aboutMethod);
                        $('.banner-m').html(aboutIntPhone);
                        $('#bannerdes-img').html(bodyBannerDes);
                        $('#webtitle').html(webtitle);
                    }
                }

            });
    }

    get_data();


});

$(".arrow").hide();
$(window).scroll(function () {
    var y1 = window.scrollY;
    if (y1> 100) {
        $(".arrow").show();
    } else {
        $(".arrow").hide();
    }

});


// $(window).scroll(function () {
//     var y = window.scrollY;

//     if (y > 550) {
//         $(".nav").addClass("sfixed");
//     } else {
//         $(".nav").removeClass("sfixed");
//     }

// });
if (jQuery(window).width() < 767) {

    $(window).scroll(function () {
        var y = window.scrollY;
    
        if (y > 550) {
            $(".nav").css({"position":"fixed","top":"38px","z-index":"10"});
        } else {
            $(".nav").css({"position":"static"});
        }
    
    });
}

// $(document).ready(function(){
//     $(window).resize(function() {
//         wdth=$(window).width();
//       console.log(wdth)
//     });
// });
$("*").each(function (index, element) {
    // 此元素被點選後執行
    $(this).click(function (e) {
      // 取得被點選元素的屬性：data-gt-target
      var target = $(this).attr("data-gt-target");
      var duration = $(this).attr("data-gt-duration");
      var offset = $(this).attr("data-gt-offset");
  
      // JS 語法：判斷式
      // if (條件) {程式區塊}
      // 當條件成立，會執行程式區塊
  
      // 如果 目標有資料 才會執行 { } 內的程式
      // 避免出現 undefine (未定義 - 不存在的資料)
      if (target) {
        //console.log("目標：" + target);
        //console.log("時間：" + duration);
        //console.log("位移：" + offset);
  
        // 上方位置 = 目標區塊.位移().上方位置
        var top = $(target).offset().top;
        //console.log("要前往元素的上方位置：" + top);
  
        // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
        // parseInt() 將文字轉為數字
  
        $("html").stop().animate({
          scrollTop: top - offset
        }, parseInt(duration));
      }
    });
  });
  
  // 避免動畫與使用者滾輪衝突
  // html 在滾動滾輪時 停止 html 所有效果
  $("html").on("mousewheel", function () {
    $("html").stop();
  });