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が、スライダーを入れても動きません。

Slide Change Callback 関数で console.log を作成すると、「undefined」と表示されます。(以下のコード)

    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 に答える