add columns views

Columns-detail.html

@@ -1329,12 +1329,12 @@
                                 <h4>你可能想看</h4>
                             </div>
                             <div class="likeSee__state__filter">
-                                <a class="likeSee__state__filter--item">
+                                <a class="likeSee__state__filter--item views">
                                     <span>人氣</span>
                                 </a>
                                 <span class="likeSee__state__filter--divider"></span>
 
-                                <a class="likeSee__state__filter--item  active">
+                                <a class="likeSee__state__filter--item active recently">
                                     <span>最新</span>
                                 </a>
                             </div>
@@ -1450,9 +1450,9 @@
                         </div>
 
 
-                        <div class="vue-waterfall popular">
+                        <!-- <div class="vue-waterfall popular">
                             <div class="row px-0 mx-0 PopularColumns">
-                                <!-- <div class="col-12 col-md-4 ps-0">
+                                <div class="col-12 col-md-4 ps-0">
                                     <div class="cardList__items">
                                         <img src="https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_338_01.jpg"
                                             alt="">
@@ -1535,9 +1535,9 @@
                                             <p><a class="likeSee__tag--item" href="/columns/lists/木工-keyword/" target="_blank">木工</a><a class="likeSee__tag--item" href="/columns/lists/diy-keyword/" target="_blank">diy</a><a class="likeSee__tag--item" href="/columns/lists/實木-keyword/" target="_blank">實木</a><a class="likeSee__tag--item" href="/columns/lists/集成材-keyword/" target="_blank">集成材</a><a class="likeSee__tag--item" href="/columns/lists/三合板-keyword/" target="_blank">三合板</a></p>
                                         </div>
                                     </div>
-                                </div> -->
+                                </div>
                             </div>
-                        </div>
+                        </div> -->
                     </div>
                 </div>
             </div>

columns.js

@@ -1,8 +1,8 @@
-$(".popular").hide();
+// $(".popular").hide();
 
 $(document).on("click", ".likeSee__state__filter--item", function (event) {
-    $(".News").toggle();
-    $(".popular").toggle();
+    // $(".News").toggle();
+    // $(".popular").toggle();
     $(".likeSee__state__filter--item").removeClass('active');
     $(this).addClass("active");
 });
@@ -144,3 +144,58 @@ function renderSec07() {
 }
 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);
+
+        });
+
+};