Probleme beim mehrmaligen Starten des Orbit-Schiebereglers

Question 1

Ich versuche, den Orbit-Slider mehrmals zu starten, indem ich diesem Beispiel folge. aber ich bekomme es nicht zum laufen.

Dies ist meine all.js-Datei

$(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 }]
  });
});

Und wenn ich das so habe, komme ich in die Konsole

Uncaught TypeError: Object.defineProperty called on non-object     jquery.js:3718

Wenn ich den Code für den Schieberegler an das Ende der Datei verschiebe, bekomme ich keine Fehler in der Konsole, aber auch der Schieberegler funktioniert nicht.

Dies ist meine Ansicht:

<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="https://stackoverflow.com/questions/37022402/{{ $externalMedia->url }}"></iframe>
            </div>
          </li>
      @endforeach
    </ul>
  </div>

Da ich Elixir zum ersten Mal in Laravel verwendet habe, bin ich mir nicht sicher, ob ich dort alles richtig gemacht habe, also könnte es auch ein Problem mit Dateikonflikten geben. Dies ist meine 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")
});

Ich hatte dieses Problem, als ich die automatische Vervollständigung von jQuery implementierte, was nicht funktionieren würde, bis ich das Skript zurb.js über jquery-ui.min.js verschoben habe. Jetzt rufe ich meine Skripte so auf:

  <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="https://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>

Question 2

Stellen Sie zunächst sicher, dass aufgrund der Vielfalt Ihrer Skripte kein Konflikt entsteht. Ich denke, den Code zu ändern:

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

oder

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

wird helfen.

Question 3

Ich kann Ihren Code nicht testen, aber ich habe eine kleine Diskrepanz bemerkt, die möglicherweise Probleme verursacht.

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

Bei jeder Anweisung fehlt ein Argument. Das erste Argument gibt den Index und das zweite das Element zurück. Das Element gibt die Indexzahl der Schleife zurück, nicht das Element, auf das Sie hoffen. Es sollte sein…

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

Das könnte ein Grund sein, warum Sie Probleme haben, den Orbit-Schieberegler zu starten.

Question 4

Der “Element”-Parameter, den $.each zurückgibt, muss nicht innerhalb von $() liegen, versuchen Sie es so und sehen Sie, was passiert.

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