首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >$(.).carousel不是函数

$(.).carousel不是函数
EN

Stack Overflow用户
提问于 2017-08-03 09:45:03
回答 2查看 7.5K关注 0票数 1

我正在用旋转木马引导和jQuery实现文本的幻灯片显示。我的代码看起来就像

代码语言:javascript
复制
<!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:

代码语言:javascript
复制
$(...).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形式的数组数据对象。数据对象包含两个填充。数据“文本”和数据“图像”。这里我用旋转木马发短信。但我没有犯错误。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-08-03 10:40:26

appendTo函数中的ajax函数存在一些错误。在这个函数中,我没有注意到旋转木马指示器是我的类或id。

所以更新的ajax代码是..。

代码语言:javascript
复制
       $.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,请考虑这一点。

票数 2
EN

Stack Overflow用户

发布于 2017-08-03 10:07:19

我认为你应该修改这段代码

$('#carousel-example-generic').carousel({}); to

$('.carousel #carousel-example-generic').carousel({});

看看这个..。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45480566

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档