Question

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

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

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>

我的问题是它没有加载。它似乎打破了页面。我的页面中还有其他插件，当我使用这种方法时，其余的插件都不起作用。

编辑==好的，所以我设法让它不破坏我的页面并通过将var和if语句放在结束脚本标记之上来打破我网站中的其余插件。但现在我的问题是if语句似乎没有运行。我曾尝试制作if条件（如果计数器== 2）{alert（“已执行”）}但当用户在幻灯片放映中查看第二张图片时似乎没有执行警告语句。

编辑2 ==所以我设法找到了问题的主要原因。根据pgwSlider文档，要使用这些方法，我首先需要通过编写这个来初始化pgwslider变量：

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

但我已经知道在该代码之后写的任何内容都没有被执行。我放置一个简单的if语句，其中我将var计数器初始化为0，并且如果counter等于零，则调用一个alertbox来弹出它。当我将if语句放在pgwSlider var之上时，它会执行并弹出警告框。当我将它放在pgwSlider var下时，它不会被执行。这是为什么？

Answer 1

scipy.signal发生了什么counter已修复1而您的if声明不再继续。

您可以通过告诉pgwSlideshow在新幻灯片加载完毕后触发事件来解决此问题。这样，您始终可以聆听最新值，并可以显示正确的Google地图。

首先，您需要将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。看起来这里列出了很多其他人：http://pgwjs.com/pgwslideshow/

在浏览器中右键单击＆gt;点击＆＃39;检查元素＆＃39;，输出将在控制台中。

最后，添加if / else logic：

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");  
    }
  }
});

无法调用jquery插件方法

1 个答案: