فهرست منبع

采美百科页面

yuwenjun1997 2 سال پیش
والد
کامیت
b64f082eeb
2فایلهای تغییر یافته به همراه39 افزوده شده و 32 حذف شده
  1. 28 23
      src/main/resources/static/js/encyclopedia/detail.js
  2. 11 9
      src/main/resources/templates/encyclopedia/detail.html

+ 28 - 23
src/main/resources/static/js/encyclopedia/detail.js

@@ -1,25 +1,30 @@
 function directory(container, flag = true) {
-    let h2Index = 0
-    $('.bk-section').each(function (index, el) {
-        let hId = 'heading', li
-        if ($(el).find('h2').length > 0) {
-            h2Index = h2Index + 1
-            hId = 'heading-' + h2Index;
-            $(el).find('h2').attr('id', hId);
-            const name = flag ? h2Index + '、' + $(el).find('h2').text() : $(el).find('h2').text();
-            li = $('<li><a href="javascript:void(0)" data-id="' + hId + '">' + name + '</a></li>');
-            $(container).append(li);
-        }
-        if(!flag) return
-        if ($(el).find('h3').length > 0) {
-            const sUl = $(`<ul></ul>`)
-            $(el).find('h3').each(function (i, h) {
-                const sId = hId + '-' + i
-                $(h).attr('id', sId)
-                const li = $('<li><a href="javascript:void(0)" data-id="' + sId + '">' + $(h).text() + '</a></li>');
-                $(sUl).append(li)
-            });
-            $(li).append(sUl);
+    const section = $('.bk-section')
+    section.find('h2').each(function (index, item) {
+        const fristTitle = 'heading-' + (index + 1);
+        const fristTitleItem = $('<li></li>');
+        const a = $('<a></a>')
+        const text = flag ? (index + 1) + '、' + $(item).text() : $(item).text();
+        a.text(text)
+        a.attr('href', 'javascript:void(0)')
+        a.attr('data-id', fristTitle)
+        fristTitleItem.append(a)
+        $(container).append(fristTitleItem)
+        $(item).attr('id', fristTitle)
+        if (flag) {
+            let subTitle = $('<ul></ul>')
+            fristTitleItem.append(subTitle)
+            $(item).parent().nextUntil('.bk-title').each(function (i, el) {
+                if (el.nodeName !== 'H3') return
+                const subTitleItem = $('<li></li>')
+                const a = $('<a></a>')
+                a.text($(el).text())
+                a.attr('href', 'javascript:void(0)')
+                a.attr('data-id', fristTitle + i)
+                subTitleItem.append(a)
+                subTitle.append(subTitleItem)
+                $(el).attr('id', fristTitle + i)
+            })
         }
     })
 }
@@ -36,10 +41,10 @@ $(function () {
         return false;
     })
 
-    $('img.scapegoat').on('click', function(){
+    $('img.scapegoat').on('click', function () {
         const id = $(this).attr('data-ctrid')
         $("html, body").animate({
-            scrollTop: $('#'+ id).offset().top
+            scrollTop: $('#' + id).offset().top
         }, {duration: 500, easing: "swing"});
     })
 })

+ 11 - 9
src/main/resources/templates/encyclopedia/detail.html

@@ -52,7 +52,7 @@
                     <div class="bk-album-list">
                         <div class="bk-album-item" th:each="item : *{imageList}">
                             <img th:src="${item.image}" th:if="${item.type == 1}">
-                            <video th:src="${item.image}" th:if="${item.videoUrl == 2}"></video>
+                            <video th:src="${item.videoUrl}" th:if="${item.type == 2}"></video>
                         </div>
                     </div>
                 </div>
@@ -65,13 +65,15 @@
                     <ul class="bk-directory-list" id="bk-directory-mobile"></ul>
                 </div>
             </div>
-            <div class="bk-section" th:each="item : *{textInfoList}">
-                <div class="bk-title" th:if="${item.dictionaryType == 1}">
-                    <h2 th:utext="${item.dictionaryContent}">美容作用</h2>
-                    <div class="line"></div>
-                </div>
-                <h3 th:if="${item.dictionaryType == 2}" th:utext="${item.dictionaryContent}"></h3>
-                <div class="bk-section-content" th:if="${item.dictionaryType == 3}" th:utext="${item.dictionaryContent}"></div>
+            <div class="bk-section">
+                <th:block th:each="item : *{textInfoList}">
+                    <div class="bk-title" th:if="${item.dictionaryType == 1}">
+                        <h2 th:utext="${item.dictionaryContent}">美容作用</h2>
+                        <div class="line"></div>
+                    </div>
+                    <h3 th:if="${item.dictionaryType == 2}" th:utext="${item.dictionaryContent}"></h3>
+                    <div class="bk-section-content" th:if="${item.dictionaryType == 3}" th:utext="${item.dictionaryContent}"></div>
+                </th:block>
             </div>
             <div class="bk-literature">
                 <div class="bk-title">
@@ -116,7 +118,7 @@
                     <div class="swiper-wrapper">
                         <div class="swiper-slide" th:each="item : *{imageList}">
                             <img th:src="${item.image}" th:if="${item.type == 1}">
-                            <video th:src="${item.image}" th:if="${item.videoUrl == 2}"></video>
+                            <video th:src="${item.videoUrl}" th:if="${item.type == 2}"></video>
                         </div>
                     </div>
                     <div class="swiper-pagination"></div>