Невозможно вызвать метод плагина jquery

Итак, я практиковал свои навыки jquery/javascript. В основном я создал веб-сайт, содержащий плагин изображений (PgwSlider) и плагин jQuery maps. Я включил 4 изображения в плагин изображения, чтобы пользователь мог просматривать разные изображения, нажав на стрелки в плагине. интерфейс. То, что я пытаюсь сделать, - это то, что когда пользователь смотрит на первый снимок, карты google отображают область. Когда пользователь нажимает на просмотр другого изображения, адрес в плагине gmaps также должен измениться. Я жестко кодирую адреса, чтобы их не было случайным. Например. если показ слайдера содержит фотографии разных университетов, по мере того, как пользователь перемещается по изображению, адрес университета, отображаемый в gmaps, также должен изменить разрешение на изображение.Невозможно вызвать метод плагина jquery

Это моя логика: Так как pgwSlider имеет метод .getCurrentSlide(), он возвращает текущий слайд. Я пытаюсь создать var и сохранить там .getCurrentslide(). А затем создайте операторы if и в каждом статусе должны быть выполнены карты goi google. Как это:

var counter = pgwSlider.getCurrentSlide(); 
if(counter == 1){*Create the map to show uni address 1*} 
else if(counter==2){*Create the map to show uni address 2"} 
else if(counter == 3){And so on etc}

Это то, что у меня есть:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="gmaps.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
<script src="pgwslideshow.min.js"></script> 
<link rel="stylesheet" href="pgwslideshow.min.css"> 
</head> 
<style> 
#map{ 
    width: 530px; 
    height:400px; 
    } 
</style> 
<body> 
<ul class="pgwSlideshow"> 
      <li> 
       <img src="http://3vxsjq3roj103wlhf71jhh7t.wpengine.netdna-cdn.com/wp-content/uploads/2014/09/computer-nerd.jpeg" 
       alt="Software Engineer" data-description="Average salary: £37k"> 
      </li> 
      <li> 
       <img src="http://www.alphasoftware.com/blog/wp-content/uploads/2015/08/Full-stack-Mobile-App-Developer-Job-in-LA.jpg" 
       alt="Mobile Developer" data-description="Average salary: £33k"> 
      </li> 
      <li> 
       <img src="http://waqas.club/wp-content/uploads/2014/11/web-developer-lahore.png" 
       alt="Web Developer" data-description="Average salary: £24k"> 
      </li> 
      <li> 
       <img src="https://sourcemaking.com/files/sm/images/architect.jpg" 
       alt="Software Architect" data-description="£62k"> 
      </li> 
      <li> 
       <img src="http://i2.cdn.turner.com/money/.element/img/1.0/sections/mag/moneymag/bestjobs/2010/snapshot/049_systems_engineer.ju.jpg" 
       alt="Systems Enginner" data-description="£40k"> 
      </li> 
     </ul> 
<div id="map"> 

     </div> 

<script> 


     $(document).ready(function(){ 
     var mapCanvas = document.getElementById('map'); 
      var mapOptions = { 
      center: new google.maps.LatLng(44.5403, -78.5463), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      var map = new google.maps.Map(mapCanvas, mapOptions); 


      $(".pgwSlideshow").pgwSlideshow({ 
     transitionEffect:'fading', 
     autoSlide:true 
     }); 

     var counter = pgwSlider.getCurrentSlide(); 

     if(counter == 1){ 
     var mapCanvas = document.getElementById('map'); 
      var mapOptions = { 
      center: new google.maps.LatLng(51.508540, -0.128082), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      var map = new google.maps.Map(mapCanvas, mapOptions); 
     }else{ 
     alert("This will be displayed for testing purposes."); 
     } 
</script> 
</body> 
</html>

Моя проблема заключается в том, что она не загружается. Кажется, он сломал страницу. У меня также есть другие плагины на моей странице, и когда я использую этот метод, остальные плагины не работают.

EDIT == Хорошо, поэтому мне удалось заставить его не сломать мою страницу и сломать остальную часть плагинов на моем сайте, поместив инструкцию var и if чуть выше закрывающего тега скрипта. Но теперь моя проблема в том, что оператор if не работает. Ive попытался сделать, если условие вроде (если счетчик == 2) {alert («выполнено»)}, но, похоже, он не выполняет команду предупреждения, когда пользователь просматривает второе изображение в слайд-шоу.

EDIT 2 == Так что мне удалось найти основную причину проблемы. Согласно pgwSlider документации, использовать методы, я в первую очередь необходим initalise переменной pgwslider написав это:

 var pgwSlider = $('.pgwSlider').pgwSlider();

Но я пришел, чтобы узнать, что все написано после этого кода, он не получает казнен , Я помещаю простой оператор if, в котором я вставляю счетчик var в 0 и вызывается, чтобы он выходил, если счетчик равен нулю, что и есть. Когда я помещаю надписью if выше pgwSlider var, он выполняет и выдает окно предупреждения. Когда я помещаю его под pgwSlider var, он не выполняется. Почему это?

источник

2015-11-26 Tarikh Chouhan

У вас есть синтаксические ошибки, вы должны открыть консоль, чтобы прочитать об ошибках в коде. см. [this] (http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers) –

Спасибо за подсказку. Я посмотрел на отладку, и это ошибки, которые я получаю: API Карт Google требуется. Пожалуйста, зарегистрируйте следующую библиотеку JavaScript https://maps.googleapis.com/maps/api/js Но у меня уже есть API карт, и карта работает нормально. Еще одна ошибка, которую я получаю: Uncaught TypeError: $ (...). PgwSlider не является функцией Это функция, которая дает ошибку: var pgwSlider = $ (". PgwSlider"). PgwSlider(); –

Что происходит counter фиксируется на 1, а ваши if заявления не отправляются дальше.

Вы можете исправить это, сообщив pgwSlideshow, чтобы запустить событие всякий раз, когда новый слайд закончил загрузку. Таким образом, вы всегда слушаете актуальное значение и можете отображать правильную карту Google.

Во-первых, вам нужно присвоить pgwSlideshow к вар:

var slideshow = $(".pgwSlideshow").pgwSlideshow({...

Затем добавьте в afterSlide метод, и использовать это, чтобы выяснить, что текущий слайд. Заменить pgwSlideshow блок кода, который вы имеете с этим:

var slideshow = $(".pgwSlideshow").pgwSlideshow({ 
    transitionEffect: 'fading', 
    autoSlide: true, 
    afterSlide: function(){ 
    var counter = slideshow.getCurrentSlide(); 
    console.log("counter number is: ", counter); 
    } 
});

afterSlide называется каждый раз pgwSlideshow делает свое дело.Похоже, здесь есть еще одна масса других пользователей: http://pgwjs.com/pgwslideshow/

Щелкните правой кнопкой мыши в своем браузере> нажмите «проверить элемент», а вывод будет в консоли.

Наконец, добавьте в, если/еще логика:

var slideshow = $(".pgwSlideshow").pgwSlideshow({ 
    transitionEffect: 'fading', 
    autoSlide: true, 
    afterSlide: function(){ 
    var counter = slideshow.getCurrentSlide(); 
    if (counter === 1){ 
    console.log("this is number one!"); 
    // add google map code for number one here 
    } 
    else 
    { 
    console.log("something else"); 
    } 
    } 
});

источник

2015-11-26 22:50:52 vohzd

также, переключайте скрипты Google Maps, так что gmaps загружается после ядра api: – vohzd

Большое спасибо. Im новый для всего веб-дизайна/программирования. Это работает, и я также понимаю, что пошло не так. Но я не понимаю, почему я получал ошибку, когда я инициализировал var. Я просто следил за документами pgwslider: / –

Невозможно вызвать метод плагина jquery

ответ

Смежные вопросы