2

我有一个菜单，可以浏览特定页面上的幻灯片列表。以下代码（HTML）一切顺利：

<ul class="dropdown">
      <li class="orange"><a href="#" data-jumpslide="2"><div class="list-item one-liner"><div class="left"><span id="functionality-icon"></span></div> <div class="right">When to do it</div><div class="clear"></div></div></a></li>
      <li class="orange"><a href="#" data-jumpslide="3" ><div class="list-item one-liner"><div class="left"><span id="functionality-icon"></span></div> <div class="right">Key faces</div><div class="clear"></div></div></a></li>
      <li class="orange"><a href="#" data-jumpslide="5" ><div class="list-item one-liner"><div class="left"><span id="functionality-icon"></span></div> <div class="right">Functionalities</div><div class="clear"></div></div></a></li>
</ul>

jQuery是：

$('a[data-jumpslide]').each(function(idx, ele){
    $(ele).on('click', function(){
        var slideToJump = $(this).data('jumpslide');
        window.slider.go(false, slideToJump+1);
    });
});

如您所见，每当单击链接时，它只是移动了该特定页面上的幻灯片。

但现在我必须创建一个通用菜单，它可以在任何页面上移动滑块。因此，如果我是“第 1 页”页面，并且在“第 2 页”单击第 7 张幻灯片的链接，则代码应打开第 2 页并移至第 7 张幻灯片。

这就是我更改 HTML 的方式：

<ul class="dropdown">
      <li class="orange"><a href="page2.php" data-jumpslide="2" data-goto="page2"><div class="list-item one-liner"><div class="left"><span id="functionality-icon"></span></div> <div class="right">When to do it</div><div class="clear"></div></div></a></li>
      <li class="orange"><a href="page2.php" data-jumpslide="2" data-goto="page2" ><div class="list-item one-liner"><div class="left"><span id="functionality-icon"></span></div> <div class="right">Key faces</div><div class="clear"></div></div></a></li>
      <li class="orange"><a href="page2.php" data-jumpslide="2" data-goto="page2" ><div class="list-item one-liner"><div class="left"><span id="functionality-icon"></span></div> <div class="right">Functionalities</div><div class="clear"></div></div></a></li>
</ul>

这就是我更改 jQuery 的方式：

$('a[data-jumpslide]').each(function(idx, ele){
    $(ele).on('click', function(e){
        e.preventDefault();
        var href = $(this).attr('href');
        var slideToJump = $(this).data('jumpslide');
        var gotoPage = $(this).data('data-goto');

        slideToJump++;
        if (gotoPage != '') {
              window.slider.go(false, slideToJump);
        }   
        else {
            var url = href+'#'+slideToJump;
            window.location = url;
        }
    });
});

var hash = window.location.hash;
$(document).ready(function(idx, ele){
  if (hash != '') {        
        window.setTimeout(function () {
          window.slider.go(false, hash);
        }, 2000);
    }
    else {
        console.log("No hash found  " + hash);
    }
});

因此，这里发生的情况是，当用户单击任何将其带到另一个页面（例如第 2 页）的链接时，它会重定向并在到达那里后检查页面是否具有哈希值。如果是这样，它将幻灯片移动到该数字。

现在一切都很好，只是幻灯片没有移动到数字！即使代码相同，即使window.slider将滑块放入其中，但它仍然不会移动。

当我在幻灯片更改回调函数上创建 console.log 时，它给了我“未定义”。（下面的代码）

    slideChangedCallBack: function(idx, slide) {

        if (console) console.log('slideChangedCallBack: '+slide.data('pagename'));
        if (s && s.t){
            s.pageName = slide.data('pagename');
            s.t();
        }

        ...
    }
4

1 回答 1

0

所以，对于任何寻找确切变化的人，我这样做了：-

var hash = window.location.hash.substring(1);

而不是这个： -

var hash = window.location.hash;
于 2013-04-26T18:54:41.020 回答