0%

[技能檢定]題組二 步驟16 建置人氣文章區彈出視窗功能及人氣排序功能

人氣文章區只更改文章排序方式,同時顯示全部內容的方式改為彈出視窗,最後是按讚時要同時改變人氣的數值:

  1. 更改排序的方式只要更改取資料的sql語法即可

    1
    2
    3
    $rows=$News->all(['sh'=>1]," order by `good` desc limit $start,$div");
    foreach($rows as $row){...

  2. 我們在 index.php 原始碼的上方可以找到一段和第一題相當類似的彈出視窗語法,我們複製這段css,並搬到 index.phpstyle 區做成一個獨立的class

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <style>
    .pop {
    background: rgba(51, 51, 51, 0.8);
    color: #FFF;
    min-height: 100px;
    width: 300px;
    position: fixed;
    display: none;
    z-index: 9999;
    overflow: auto;
    /*以下設定只是美化 */
    padding: 15px;
    border-radius: 10px;
    box-shadow: 2px 2px 10px #999;
    height: 400px;
    }
    </style>
  3. 在第三欄增加一個人氣的顯示

    1
    2
    3
    <!--數值部份單獨使用一個span包起來,方便js處理-->
    <span><?=$row['good'];?></span>個人說
    <img src="./icon/02B03.jpg" style="width:25px">
  4. 修改原本 news.php 的js程式,以適合人氣文章的題意要求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    //點擊事件改為hover
    $(".title").hover(
    function(){
    //先將所有的pop隱藏起來
    $(".pop").hide()

    //取得點擊的id
    let id=$(this).data("id")

    //將對應的pop顯示出來
    $("#p"+id).show();
    }
    )
  5. 可以將最新文章的 good() 函式搬到 /js/js.js 使用外檔案的方式引入至index.php使用,就不用再寫一次js程式了