在寫(xiě)內(nèi)容邏輯重復(fù)性的頁(yè)面時(shí),用json數(shù)據(jù)可以顯著提高編程效率,并且便于后期的數(shù)據(jù)維護(hù)。因此,在視頻專(zhuān)題頁(yè)面,需要展示多列視頻數(shù)據(jù),我選擇了用json。
HTML如下(只展示重點(diǎn)部分,需要引用JQ)
<div class="container-fluid content "> <div class="container neirong"> <div class="left fl"> <div class="title"> 熱門(mén)視頻 </div> <div class="medialist"> </div> </div></div> </div>
JS如下
<script> $(document).ready(function(){ console.log(1111) $.getJSON('data.json',function(data){ console.log(222) var mediahtml=""; $.each(data,function(i,data) { mediahtml+='<div class="media">'+ '<div class="media-left">'+ '<a data-toggle="modal" data-target="#myModal">'+ '<img class="media-object" src="'+data["imgsrc"]+ '" alt="">'+ '</a>'+'</div>'+ '<div class="media-body">'+ '<div class="title">'+ '<span class="classify">'+ data["classify"]+ '</span>'+ '<span class="titlename media-heading">'+ data['titlename']+ '</span>'+ '</div>'+ '<span class="time">'+ '<span class="glyphicon glyphicon-time"></span> '+ '<span>'+data['pubdate']+'</span>'+ '<p>'+data["intro"]+'</p>'+ '<div class="guest">'+ '<span class="jia">嘉</span>'+ '<span class="name">'+data["name"]+'</span>'+ '<span class="position">'+data["position"]+'</span>'+ '<span class="glyphicon glyphicon-eye-open"></span>'+ '<span class="click-rite"></span>'+ '</div>'+ '</div>'+ '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">'+ '<div class="modal-dialog" role="document">'+ '<div class="modal-content">'+ '<div class="modal-header">'+ '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+ '<span aria-hidden="true">×</span>'+ '</button>'+ '</div>'+ '<div class="modal-body"></div>'+ '</div>'+ '</div>'+ '</div>' // var url_mobi=data.url_mobi; // var url_pc=data.url_pc; // if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) { // $('.modal-body').prepend(url_mobi); // }else{ // $('.modal-body').prepend(url_pc); // } // // }) $('.medialist').after(mediahtml); }) }) $('#myModal').on('shown.bs.modal', function (e) { // 關(guān)鍵代碼,如沒(méi)將modal設(shè)置為 block,則$modala_dialog.height() 為零 $(this).css('display', 'block'); var modalHeight = $(window).height() / 2 - $('#myModal .modal-dialog').height() / 2; $(this).find('.modal-dialog').css({ 'margin-top': modalHeight }); }); //點(diǎn)擊預(yù)覽圖時(shí)判斷 // $('.modal').on('click', function () { // if ($('#myModal').css("display") == "none") { // $('.modal-body').children('iframe').attr('src', ''); // } else { // $('.modal-body').children('iframe').attr('src', // 'https://v.qq.com/iframe/player.html?vid=v0508nqkm75&tiny=0&auto=0'); // } // }) </script>
注釋部分可不看,不影響內(nèi)容。
首先要新建json文件,json文件需注意的問(wèn)題是:json對(duì)數(shù)據(jù)格式有要求,不識(shí)別url中的各類(lèi)符號(hào),因此會(huì)提示錯(cuò)誤,如果不修復(fù),則會(huì)阻斷JS進(jìn)程,造成數(shù)據(jù)在頁(yè)面不顯示,這個(gè)問(wèn)題我找了好久才發(fā)現(xiàn),而且json問(wèn)題在js中不會(huì)報(bào)錯(cuò)。解決辦法是利用encode方法,格式化url,然后再添加進(jìn)json即可,在html中應(yīng)該還要用decode轉(zhuǎn)回來(lái)。
第二個(gè)坑是插入html到某個(gè)標(biāo)簽中,有四個(gè)方法,用after就可以實(shí)現(xiàn),不要用反了。
第三點(diǎn)是需要注意,不要在拼接字符串的時(shí)候忘掉加號(hào),少一個(gè)就會(huì)出問(wèn)題,一個(gè)小問(wèn)題會(huì)找好久才發(fā)現(xiàn),而且拼接錯(cuò)誤JS不會(huì)報(bào)錯(cuò),很難發(fā)現(xiàn)。
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com