多次启动动态观察滑块的问题

Question

我正在尝试多次启动动态观察滑块，遵循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>&#9664;&#xFE0E;</button>
      <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</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>

Answer 1

首先，确保不会因为脚本的多样性而发生冲突。我认为将代码更改为：

$(".slider").each(function($element) {
  sliderInstances.push(new Foundation.Orbit($element, sliderOptions));
});

或

$(".slider").each(function() {
   sliderInstances.push(new Foundation.Orbit($(this), sliderOptions));
});

会有帮助的。

Answer 2

我无法测试你的代码，但我注意到一个小的差异，这可能会给你带来一些问题。

$(".slider").each(function(element) {
  sliderInstances.push(new Foundation.Orbit($(element), sliderOptions));
});

each语句缺少一个参数。第一个参数返回索引，第二个参数返回元素。该元素返回循环的索引计数，而不是您希望的元素。应该是..。

$(".slider").each(function(index, element) {
  sliderInstances.push(new Foundation.Orbit($(element), sliderOptions));
});

这可能是你在启动oribit滑块时遇到问题的原因之一。

Answer 3

$.each返回的"element“参数不需要在$()内，试着这样做，让我们看看会发生什么。

$(".slider").each(function(element) { 
    sliderInstances.push(new Foundation.Orbit(element, sliderOptions)); 
});