我正在用旋转木马引导和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形式的数组数据对象。数据对象包含两个填充。数据“文本”和数据“图像”。这里我用旋转木马发短信。但我没有犯错误。
发布于 2017-08-03 10:40:26
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注释中有额外的space.Please,请考虑这一点。
发布于 2017-08-03 10:07:19
我认为你应该修改这段代码
$('#carousel-example-generic').carousel({}); to
$('.carousel #carousel-example-generic').carousel({});
看看这个..。
https://stackoverflow.com/questions/45480566
复制相似问题