【发布时间】：2016-08-29 13:50:58
【问题描述】：
我正在尝试按照this 示例多次启动轨道滑块。但我无法让它工作。
这是我的 all.js 文件
$(document).ready(function() {
//add input field for external media
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initial text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="external_media[]"/><a href="#" class="remove_field"><button type="button" class="secondary button">Remove</button></a></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
//autocomplete for challenge question
$("#challenge_question").autocomplete({
source: "http://coop.app/admin/challenges/autocomplete",
minLength: 2,
select: function( event, ui ) {
$('#challenge_question').val(ui.item.id);
}
});
//slider
//var orbit = new Foundation.Orbit($('#slider'));
var sliderOptions = {};
var sliderInstances = [];
$(".slider").each(function(element) {
sliderInstances.push(new Foundation.Orbit($(element), sliderOptions));
});
//chart views by category
$('#byCategory').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Most read article type'
},
xAxis: {
categories: icoop.categories
},
yAxis: {
min: 0,
title: {
text: null
},
allowDecimals: false
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: null
},
},
series: [{ name: 'Views', data: icoop.categoryViews }]
});
//chart views by chains
$('#byChain').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Most read chain'
},
xAxis: {
categories: icoop.chains
},
yAxis: {
min: 0,
title: {
text: null
},
allowDecimals: false
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: null
},
},
series: [{ name: 'Views', data: icoop.chainViews }]
});
//by time of the day
$('#byTime').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Time of the day with most reads'
},
xAxis: {
categories: ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14', '14-16', '16-18', '18-20', '20-22', '22-24']
},
yAxis: {
min: 0,
title: {
text: null
},
allowDecimals: false
},
plotOptions: {
column: {
stacking: null
}
},
series: [{ name: 'Views', data: icoop.viewsByTimeOFTheDay }]
});
});
当我拥有它时，我会进入控制台
Uncaught TypeError: Object.defineProperty called on non-object jquery.js:3718
当我将滑块的代码移动到文件底部时，控制台中没有任何错误，但滑块也不起作用。
这是我的看法：
<div class="orbit slider" role="region" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
@foreach($article->medias as $media)
<li class="orbit-slide">
{!! Html::image($media->path) !!}
</li>
@endforeach
@foreach($article->externalMedias as $externalMedia)
<li class="orbit-slide">
<div class="flex-video">
<iframe src="{{ $externalMedia->url }}"></iframe>
</div>
</li>
@endforeach
</ul>
</div>
另外，由于我是第一次在 Laravel 中使用 elixir，我不确定我在那里做的是否正确，所以也可能存在文件冲突的问题。这是我的 gulpfile.js：
elixir(function(mix) {
mix.sass('app.scss', './public/css/app.css')
.styles([
'foundation.min.css',
'app.css'
])
.styles([
'jquery.filer.css',
'jquery.filer-dragdropbox-theme.css',
], "public/css/jquery-filer/jquery.filer.css")
.scripts([
'zurb/jquery.js',
'zurb/what-input.js',
'zurb/foundation.js',
], "public/js/zurb/zurb.js")
.scripts([
'jquery-filer/jquery.filer.js',
'jquery-filer/image-uploader.js',
], "public/js/jquery-filer/jquery-filer.js")
.scripts([
'editor/editor.js',
], "public/js/editor/editor.js")
.scripts([
'app.js',
], "public/js")
});
我在实现 jQuery 自动完成时遇到了这个问题，直到我将脚本 zurb.js 移到 jquery-ui.min.js 之上，它才会起作用。现在我这样调用我的脚本：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ asset('js/zurb/zurb.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript" src="{{ asset('js/jquery-filer/jquery-filer.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/editor/editor.js') }}"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="{{ asset('js/all.js') }}"></script>
【问题讨论】：
-
控制台有错误吗？
-
我现在检查了一下，我得到：foundation.js:5474 Uncaught TypeError: Cannot read property 'data' of undefined
-
你使用的是什么版本的 Foundation？
-
最新版本，v6.2.1。
-
@Marco 默认情况下应该可以正常工作jsfiddle.net/8c4ztmut
标签： javascript jquery slider zurb-foundation