2017-08-03 26 views
0

我正在使用傳送帶引導程序和jQuery實現文本幻燈片放映。 我的代碼看起來像

<!DOCTYPE html> 
<html> 
    <head> 
     <title>title</title> 
      <meta charset="utf-8"> 
      <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
      <meta name="viewport" content="width=device-width, initial- 
      scale=1">  
<!--JQuery File --> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <!--Logo of website --> 
      <link rel="shortcut icon" href="image/logo.jpg"> 

<!-- BootStrap CSS File--> 
      <link href="lib/css/bootstrap.min.css" rel="stylesheet"> 

<!-- Bootstrap JS File--> 
      <script type="text/javascript" src="lib/js/bootstrap.min.js"> 
      </script> 

<!-- Custome CSS--> 
      <link href="lib\css\custome.css" rel="stylesheet" /> 
<!-- FA Icons --> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 


<script type="text/javascript"> 
     $(document).ready(function(){ 
      $.ajax({ 
       type:'GET', 
       url:'Controller.php?user-tweet=true', 
       dataType:'json', 
       success:function(result){ 
        var html_data = ''; 
        var i = 0; 
        $.each(result['data'],function(index,data){ 
         $('<div class="item"><p>"'+data['text']+'"</p></div>').appendTo('carousel-inner'); 
         $('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>').appendTo('carousel-inndicators'); 
         i++; 
        }); 
        $('.item').first().addClass('active'); 
        $('carousel-inndicators > li').first().addClass('active'); 
        $('#carousel-example-generic').carousel({ 
         interval:3000 
        }); 
       }, 
       failure: function(){ 
        alert(Error); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div class="jumbotron"> 
     <div class="container"> 
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators--> 
      <ol class="carousel-inndicators"> 

      </ol> 
      <!--Wrapper item --> 
      <div class="carousel-inner"> 
       <!-- Controlls --> 
       <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
        <span class="glyphicon glyphicon-chevron-left"></span> 
       </a> 
       <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right"></span> 
       </a> 
      </div> 
     </div> 
     </div> 
    </div> 
</body> 
</html> 

在上面的代碼中,我得到了一個錯誤

遺漏的類型錯誤:

$(...).carousel is not a function 
at Object.success (home.php:42) 
at i (jquery.min.js:2) 
at Object.fireWith [as resolveWith] (jquery.min.js:2) 
at A (jquery.min.js:4) 
at XMLHttpRequest.<anonymous> (jquery.min.js:4) 

有任何建議,我可以做什麼進一步的,所以我可以開始我的旋轉木馬成功。

關於Controller.php的信息?user-tweet = true; 一旦用戶登錄,它給了我一個JSON格式的數組數據對象。da​​ta對象包含兩個fill。 data ['text']和data ['image']。在這裏,我正在用旋轉木馬上的文字發短信。但我得到了以上錯誤。

+0

該傳送帶不是內置功能,而是第三方插件,不是嗎? –

+0

你加了carousle js庫嗎?我沒有在你的代碼中看到它? –

+0

你的引導腳本在哪裏? NVM我現在看到它。但它被怪異地評論了出來。 – Gezzasa

回答

1

有在appendTo功能的AJAX功能的一些錯誤。在這個功能中,我沒有注意到轉盤指標是我的課程或編號。

所以更新的Ajax代碼是...

 $.ajax({ 
       type:'GET', 
       url:'Controller.php?user-tweet=true', 
       dataType:'json', 
       success:function(result){ 
        var html_data = ''; 
        var i = 0; 
        $.each(result['data'],function(index,data){ 
         console.log(data); 
         $('<div class="item"><p>"'+data['text']+'"</p></div>').appendTo('.carousel-inner'); 
         $('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>').appendTo('.carousel-indicators'); 
         i++; 
        }); 
        $('.item').first().addClass('active'); 
        $('.carousel-indicators > li').first().addClass('active'); 
        $('#carousel-example-generic').carousel(); 
       }, 
       failure: function(){ 
        alert(Error); 
       } 
      }); 

並沒有在其中我們用具有@SchalkKeun評論額外space.Please評論討論的考慮代碼中的另一個錯誤。

1


我想你應該將此代碼
$('#carousel-example-generic').carousel({});更改爲
$('.carousel #carousel-example-generic').carousel({});
入住此...

+0

這對我的代碼沒有任何影響。 –

+0

對不起,反正也試試這個,$('。carousel')。圓盤傳送帶(); –

+0

請檢查我的答案,我寫錯了地方。 –