Javascript 无法调用jquery插件方法_Javascript_Jquery

Javascript 无法调用jquery插件方法

javascript jquery

Javascript 无法调用jquery插件方法,javascript,jquery,Javascript,Jquery,所以我在练习jquery/javascript技能。我基本上创建了一个包含图像插件（PgwSlider）和谷歌地图jquery插件的网站。我在图像插件中包含了4幅图像，因此用户可以通过单击插件中的箭头来查看不同的图像。接口。我想做的是，当用户看到第一张图片时，谷歌地图会显示一个区域。当用户点击查看另一张图片时，gmaps插件上的地址也应该改变。我硬编码的地址，所以它不是随机的。例如，如果滑块显示包含不同大学的图片，当用户在图片中移动时，GMAP中显示的大学地址也应与图片相关这是我的逻辑：由于

所以我在练习jquery/javascript技能。我基本上创建了一个包含图像插件（PgwSlider）和谷歌地图jquery插件的网站。我在图像插件中包含了4幅图像，因此用户可以通过单击插件中的箭头来查看不同的图像。接口。我想做的是，当用户看到第一张图片时，谷歌地图会显示一个区域。当用户点击查看另一张图片时，gmaps插件上的地址也应该改变。我硬编码的地址，所以它不是随机的。例如，如果滑块显示包含不同大学的图片，当用户在图片中移动时，GMAP中显示的大学地址也应与图片相关

这是我的逻辑：由于pgwSlider有一个.getCurrentSlide（）方法，因此它返回当前幻灯片的值。我要做的是创建一个var并将.getCurrentslide（）存储在其中。然后创建一个if语句，并在每个语句中执行googlemapsapi。像这样：

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>

但我知道，在代码之后编写的任何东西都不会被执行。我放置了一个简单的if语句，其中我初始化了一个var计数器为0，并调用了一个alertbox，以便在计数器等于零时弹出，它就是。当我将if语句放置在pgwSlider变量上方时，它将执行并弹出警报框。当我把它放在pgwSlider变量下时，它不会被执行。这是为什么？

发生的事情是，

计数器

被固定在

，如果语句不再继续，您的


您可以通过告诉pgwSlideshow在新幻灯片加载完成时触发事件来解决此问题。这样，您就可以始终收听最新的值，并显示正确的谷歌地图
首先，您需要将pgwSlideshow分配给一个var：
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);
  }
});

每次pgwSlideshow做它的事情时，都会调用afterSlide
。看起来这里列出了很多其他的函数：
在浏览器中单击鼠标右键>单击“检查元素”，输出将显示在控制台中
最后，添加if/else逻辑：
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");  
    }
  }
});

如果您有语法错误，您应该打开控制台阅读代码中的错误。请参阅感谢提示。我已经查看了调试，这是我得到的错误：Google Maps API是必需的。请注册以下JavaScript库，但我已经得到了Maps API，映射工作正常。我得到的另一个错误是：未捕获的TypeError:$（…）.pgwSlider不是一个函数这是给出错误的函数：var pgwSlider=$（“.pgwSlider”）.pgwSlider（）；另外，切换google地图脚本，以便在api核心：maps.googleapis.com/maps/api/js之后加载gmaps“>非常感谢。我对整个网页设计/编程都是新手。它很有效，我也知道出了什么问题。但我不明白的是，为什么我在初始化变量时出错。我只是按照pgwslider文档操作：/
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");  
    }
  }
});