我正在使用轮播 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>
在上面的代码中我得到一个错误
未捕获的类型错误:
$(...).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 形式的数组数据对象。数据对象包含两个填充。数据['文本']和数据['图像']。在这里，我正在用轮播中的文本发短信。但我遇到了上述错误。
最佳答案
appendTo 函数中的 ajax 函数出现一些错误。在该函数中，我没有注意到 carousel-indicators 是我的类或 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 评论有额外的空间。请考虑这一点。
关于jquery - $(...).carousel 不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45480566/