Question

我正在使用carousel bootstrap和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>

在上面的代码中我得到了一个错误

未捕获的TypeError：

$(...).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形式的数组数据对象。数据对象包含两个填充。数据[＆＃39;文字＆＃39;]和数据[＆＃39;图像＆＃39;]。在这里，我用旋转木马中的文本发短信。但我犯了上面的错误。

Answer 1

appendTo函数中的ajax函数有一些错误。在那个函数中，我没有注意到轮播指示符是我的类或id。

如此更新的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评论。请考虑一下。

Answer 2

我想你应该改变这段代码 $('#carousel-example-generic').carousel({});到
的 $('.carousel #carousel-example-generic').carousel({});
检查一下......

$（...）。carousel不是一个功能

2 个答案: