hhh-page-dev/columns.js

// $(".popular").hide();

$(document).on("click", ".likeSee__state__filter--item", function (event) {
    // $(".News").toggle();
    // $(".popular").toggle();
    $(".likeSee__state__filter--item").removeClass('active');
    $(this).addClass("active");
});

const urlParams = new URLSearchParams(window.location.search);
let id = urlParams.get('cid');
console.log(id);

function get_data() {
    $.ajax({
        method: "GET",
        url: `json/Columns-${id}.json`,
        // url:`json/Columns.json`,
        dataType: "json",
    })

        .done(function (msg) {
            console.log(msg);

            let ColumnsContent = "";
            let ColumnsTag = "";
            let breadcrumbTitle = "";
            let article_info = "";
            let OtherColumns = "";
            let PopularColumns = "";



            breadcrumbTitle = `<a href="#">${msg[0].Columnstitle}</a>`

            article_info = `
        <h1 class="article__title mt-4">${msg[0].Columnstitle}</h1>
        <div class="small">${msg[0].ColumnsDate}｜ 人氣:${msg[0].ColumnsViews}</div>
        `;


            ColumnsContent = `${msg[0].ColumnsContent}`;

            for (let j = 0; j < msg[0].ColumnsTag.length; j++) {
                ColumnsTag += ' \
                <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[0].ColumnsTag[j].Tag + '-keyword/" \
                class="btn btn-outline-custom rounded-0">'
                    + msg[0].ColumnsTag[j].Tag + '</a>';
            }


            for (let i = 0; i < 12; i++) {
                OtherColumns +=
                    '<div class="col-12 col-md-4 ps-0"><div class="cardList__items">\
                <a target="_blank" href="https://hhh.com.tw/columns/detail/'+ msg[0].OtherColumns[i].Columnsid + '/"> <img src="' + msg[0].OtherColumns[i].ColumnsCoverImg + '" alt="">\
            <div class="cardList__items__content">\
                <a href="https://hhh.com.tw/columns/detail/'+ msg[0].OtherColumns[i].Columnsid + '/"" target="_blank">\
                    <div class="cardList__items--title cardList__items--ellipse">\
                        '+ msg[0].OtherColumns[i].Columnstitle + '\
                    </div>\
                </a>'
                OtherColumns += '<p>'
                for (k = 0; k < msg[0].OtherColumns[i].ColumnsTag.length; k++) {
                    OtherColumns += '\
                    <a class="likeSee__tag--item" href="https://hhh.com.tw/columns/lists/'+ msg[0].OtherColumns[i].ColumnsTag[k].tag + '-keyword/all-columntypea/" arget="_blank">' + msg[0].OtherColumns[i].ColumnsTag[k].Tag + '</a>'
                }
                OtherColumns += '</p>'
                OtherColumns += '</div></div></div>'

            }


            // for(let i=0; i<msg[0].PopularColumns.length; i++){
            //     PopularColumns+=
            //     '<div class="col-12 col-md-4 ps-0"><div class="cardList__items">\
            //         <a target="_blank" href="https://hhh.com.tw/columns/detail/'+msg[0].PopularColumns[i].Columnsid+'/"> <img src="'+msg[0].PopularColumns[i].ColumnsCoverImg+'" alt="">\
            //     <div class="cardList__items__content">\
            //         <a href="https://hhh.com.tw/columns/detail/'+msg[0].PopularColumns[i].Columnsid+'/"" target="_blank">\
            //             <div class="cardList__items--title cardList__items--ellipse">\
            //                 '+msg[0].PopularColumns[i].Columnstitle+'\
            //             </div>\
            //         </a>'
            //         PopularColumns+='<p>'
            //         for(k=0; k<msg[0].PopularColumns[i].ColumnsTag.length; k++){
            //             PopularColumns+='\
            //             <a class="likeSee__tag--item" href="https://hhh.com.tw/columns/lists/'+msg[0].PopularColumns[i].ColumnsTag[k].tag+'-keyword/all-columntypea/" arget="_blank">'+msg[0].PopularColumns[i].ColumnsTag[k].Tag+'</a>'
            //         }
            //         PopularColumns+='</p>'
            //         PopularColumns+='</div></div></div>'

            // }




            $('.article_info').html(article_info);

            $('.breadcrumb-title').html(breadcrumbTitle);

            $('.ColumnsContent').html(ColumnsContent);

            $('.ColumnsTag').html(ColumnsTag);

            $('.OtherColumns').html(OtherColumns);

            // $('.PopularColumns').html(PopularColumns);





        });
}

function renderSec07() {
    $.ajax({
        method: "GET",
        // url: `json/bannerAds-${id}.json`,
        url: `json/bannerAds.json`,
        dataType: "json",
    })
        .done(function (msg) {
            console.log(msg);
            let str = '';
            for (let i = 0; i < msg[0].data.length; i++) {
                // console.log(msg[i])
                str += `<div class="sec-07__slider-${i + 1} slide-item" onclick="window.open('${msg[0].data[i].link}');" data-bg="${msg[0].data[i].imgUrl}"><img class="img-fluid" src="${msg[0].data[i].imgUrl}"></div>`
            }
            $(`.sec-07__slider`).html(str);
            $(".sec-07__slider").slick({
                dots: false,
                autoplay: true,
                arrows: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplaySpeed: 7000,
                initialSlide: 0,
                infinite: true,
                prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
            });
        });

}
get_data();
renderSec07();


$(".views").click(function () {
    get_views_data();
});

$(".recently").click(function () {
    get_data();
});

function get_views_data() {
    $.ajax({
        method: "GET",
        url: `json/Columns-${id}.json`,
        // url:`json/cases.json`,
        dataType: "json",
    })
        .done(function (msg) {

            console.log(msg);
            let OtherColumns = "";

            msg[0].OtherColumns.sort(function (a, b) {
                return a['Views'] > b['Views'] ? -1 : 1;
            });



            console.log(msg[0].OtherColumns);

            for (let i = 0; i < msg[0].OtherColumns.length; i++) {
                OtherColumns +=
                    '<div class="col-12 col-md-4 ps-0"><div class="cardList__items">\
                    <a target="_blank" href="https://hhh.com.tw/columns/detail/'+ msg[0].OtherColumns[i].Columnsid + '/"> <img src="' + msg[0].OtherColumns[i].ColumnsCoverImg + '" alt="">\
                <div class="cardList__items__content">\
                    <a href="https://hhh.com.tw/columns/detail/'+ msg[0].OtherColumns[i].Columnsid + '/"" target="_blank">\
                        <div class="cardList__items--title cardList__items--ellipse">\
                            '+ msg[0].OtherColumns[i].Columnstitle + '\
                        </div>\
                    </a>'
                OtherColumns += '<p>'
                for (k = 0; k < msg[0].OtherColumns[i].ColumnsTag.length; k++) {
                    OtherColumns += '\
                        <a class="likeSee__tag--item" href="https://hhh.com.tw/columns/lists/'+ msg[0].OtherColumns[i].ColumnsTag[k].tag + '-keyword/all-columntypea/" arget="_blank">' + msg[0].OtherColumns[i].ColumnsTag[k].Tag + '</a>'
                }
                OtherColumns += '</p>'
                OtherColumns += '</div></div></div>'

            }

            $('.OtherColumns').html(OtherColumns);

        });

};



// $(document).ready(function () {
//     var h = $('#hhh-cases').height();
//     var sh = $('#hhh-cases').scrollHeight;
//     var st = $('#hhh-cases').scrollTop;

//     console.log(h);
//     console.log(sh);
//     console.log(st);


//     $('#hhh-cases').scroll(function () {
//         var h = $(this).height();
//         var st = $(this).scrollTop;

//         console.log(h);
//         console.log(sh);
//         console.log(st);
//         if(h+st>= sh){
//             alert('底部了')
//         }

//     });
// });

$(document).ready(function() {
    $(window).scroll(function() {
  
      if ($(document).scrollTop()<=0){
        // alert("滾動條已經到達頂部爲0");
      }
  
      if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
        // alert("滾動條已經到達底部爲" + $(document).scrollTop());
      }
    });
  });