動畫選片-Json(P4)

(三)AjaxJSON資料載入

Step1 : 解JSON格式

[
  {
    "title": "瓦力",
    "titleen": "walle",
    "image": "movie01",
    "mtime": "96分鐘",
    "country": "美國",
    "lan": "英語",
    "sub": "發人深省的機器人故事",
    "tag": "hot,dvd",
    "score": 8.5,
    "desc": "<br>\t\t<p>西元2805年,人類文明高度發展,卻因污染和生活垃圾大量增加使得地球不再適於人類居住。..."
  },
  {
    "title": "勇敢傳說",
    "titleen": "Brave",
    "image": "movie02",
    "mtime": "95分鐘",
    "country": "美國",
    "lan": "英語",
    "sub": "梅莉達的勇敢故事",
    "tag": "dvde",
    "score": 7.5,
    "desc": "<br>\t\t<p>長久以來,那些偉大的戰爭故事和魔幻的傳說一直被人們口口相傳,一代又一代,生生不息在這片延綿又神秘的蘇格蘭高地上。..."
  },

...(略)

]

 

Step2 : Ajax( JSON )載入

語法參考:jQuery的getJSON()方法

  $.getJSON('./movielist.json',function(Mjson){
      console.log(Mjson);
      $(Mjson).each(function(i, element) {
        var Mtitle = Mjson[i].title;
        var Mtitleen = Mjson[i].titleen;
          // console.log(Mtitle);
        var Mimage = Mjson[i].image;
        var Mmtime = Mjson[i].mtime;
        var Mcountry = Mjson[i].country;
        var Mlan = Mjson[i].lan;
        var Msub = Mjson[i].sub;
        var Mtag = Mjson[i].tag;
        var Mscore = Mjson[i].score;
        var Mdesc = Mjson[i].desc;
        $('.movieAn').append(
          '<tr class="list" data-tag="'+Mtag+'">'+
              '<td>'+Mtitle+'</td>'+
              '<td><img src="../images/p3/'+Mimage+'.jpg" alt=""></td>'+
              '<td>'+Msub+'</td>'+
              '<td>'+Mdesc+'</td>'+
          '</tr>' 
        );  //append End

        //移除資料內多餘的<br>
          $('.list td:nth-child(4) br').remove();
    }); // each End
  });  //$getJSON end

練習:將資料加入至表格中

Step1:加入【.movieAn】加入<table>的表頭

  <h2>動畫精選</h2>
  <h3>選電影【json】</h3>
  <ul class="tag">
    <li><a href="#all" class="isactive">全部</a></li>
    <li><a href="#new">最新影片</a></li>
    <li><a href="#hot">熱門強片</a></li>
    <li><a href="#dvd">DVD同步</a></li>
    <li><a href="#theme">主題介紹</a></li>
  </ul>
  <table border="1"  class="movieAn">
    <tr>
      <td>片名</td>
      <td>劇照</td>
      <td>故事概要</td>
      <td>說明</td>
    </tr>
    <tr class="list" data-tag="hot,dvd">
      <td>瓦力</td>
      <td><img src="../images/p3/movie01.jpg" alt=""></td>
      <td>發人深省的機器人故事</td>
      <td>影片說明</td>
    </tr>
  </table>

Step2:美化表格

// 上方 .tag 美化
.tag{
  text-align: center;
  li{
    display: inline-block;  margin: 15px;
    a{
      color:#00acc1;
      &.isactive {
        color:#A00002; font-weight:bold; background:#f8bbd0;
        padding:10px 20px; border-radius:10px;
        border-bottom: 3px solid #ff5893;
      }
    }
  }
} //.tag end

.movieAn{
  border: 1px solid #000000; width: 80%; margin: auto;
  tr{
    transition: all .5s; cursor: pointer;
    background: #e7f0f3;

    td{
      
      padding: 5px; text-align: center;
      &:nth-child(-n+3){white-space: nowrap;}
    }
    &:nth-child(n+2) td:nth-child(4){text-align: left; text-indent: 36px;}
    &:hover{
      background: #FFEED0; color: #900C3F;
    }
  } //tr end
  img{
    width: 130px; transition: all .5s; cursor: pointer; margin: 5px;
    border-radius: 10px; box-shadow: 1px 1px 3px #000;
    &:hover{ transform: scale(1.1);}
  }
} // .movieAn

 

Step3:同XML作法相同,進行篩選

  //S3:篩選項目
  $('.tag a').click(function(){

      // S3-1:利用加上【.isactive】顯示正在篩選的按鈕色彩
        $('.tag a').removeClass('isactive');
        $(this).addClass('isactive');

      //S3-2:click時,抓取a的【href】值
        var $tag = $(this).attr('href').replace('#','');
        // console.log($tag);

      // S3-3:練習1:利用hide()、show()顯示篩選項目
        //S3-3-1:在篩選前,利用【hide】隱藏各項目
        $(".list").hide();

        //S3-3-2:利用【show】顯示符合篩選條件項目
          if( $tag == 'all' ){
            $('.list').show();
          }else{
            $('.list[data-tag*="'+$tag+'"]').show();
          }
    });

 

Step4:新增【more..】鈕

S4-1:desc儲存格調整

$.getJSON('./movielist.json',function(Mjson){
      console.log(Mjson);
      $(Mjson).each(function(i, element) {
        var Mtitle = Mjson[i].title;
        var Mtitleen = Mjson[i].titleen;
          // console.log(Mtitle);
        var Mimage = Mjson[i].image;
        var Mmtime = Mjson[i].mtime;
        var Mcountry = Mjson[i].country;
        var Mlan = Mjson[i].lan;
        var Msub = Mjson[i].sub;
        var Mtag = Mjson[i].tag;
        var Mscore = Mjson[i].score;
        var Mdesc = Mjson[i].desc;
        $('.movieAn').append(
          '<tr class="list" data-tag="'+Mtag+'">'+
              '<td>'+Mtitle+'</td>'+
              '<td><img src="../images/p3/'+Mimage+'.jpg" alt=""></td>'+
              '<td>'+Msub+'</td>'+
              '<td class="desc">'+Mdesc+'<button>more...</button></td>'+      //修改處
          '</tr>' 
        );  //append End

        //移除資料內多餘的<br>
          $('.list td:nth-child(4) br').remove();
    }); // each End

 });  //$getJSON end

CSS調整

.movieAn{
  tr{
    td{
      p:nth-of-type(2){ display: none;}   //新增處
  } //tr end
} // .movieAn

JS寫在 $getJSON end 內

  $.getJSON('./movielist.json',function(Mjson){
      console.log(Mjson);
      $(Mjson).each(function(i, element) {
            ...(略)
      }); // each End

        //S4:【加上按鈕收合資料】                   //新增處
        $('button').click(function(){
          if($(this).prev().is(':hidden')){
            $(this).text('hide...');
            $(this).prev().slideDown();
          }else{
            $(this).text('more...');
            $(this).prev().slideUp();
          }
        });

  });  //$getJSON end