URLハッシュタグで選択メニューを更新

Question

選択メニューを更新して、スライドショーの各スライドと一致させようとしています。つまり、スライドショーは、各スライドごとに更新されたURLのハッシュタグでブックマーク可能です。私の選択メニューには、各スライドのハッシュタグに一致する各オプションのクラスがあります。スライドショーにはCycle2、ドロップダウンにはDDslickを使用しています。しかし、私のjavascriptはDDslickを無効にしても選択メニューを更新するようには働いていません。

今、これは私のjavascriptです。

$(".cycle-pager span, #prev, #next").click(function() { 
 
     if ($('.watch').css('opacity') == '1') { 
 
     var link=$(this).attr('data-cycle-hash'); 
 
     var hash = link.substring(link.indexOf('#')+1); 
 
     $('#selectOptions2 option').removeAttr('selected'); 
 
     $('#selectOptions2 .'+hash).attr('selected',true); 
 
     } 
 
});

ここJSfiddle上の完全な例のセットアップです：私はここに失火されているものだけでわからない、本当に近くだように私は感じhttps://jsfiddle.net/liquilife/du2qztfq/5/

。

Answer 1

こんにちは、両方のライブラリを悪用していて、何かを邪魔しないようにして、それがうまくいっていると言わなければなりません。回避策なしで正しく作ろうとします。

DDsclickドキュメント：

http://designwithpc.com/Plugins/ddSlick#demo

あなたはddsclick選択ボックスで、あなたの要素を選択する方法をはっきりと見ることができます。

$('#demoSetSelected').ddslick('select', {index: i }); 

CYCLE2のドキュメント：

http://jquery.malsup.com/cycle2/api/#auto-init

ここにあなたが次のスライドがロードされた後にトリガされる「サイクル後に」と呼ばれるイベントがあることがわかりますし、使用量がこのようなものです：（

$('#mySlideshow').on('cycle-eventname', function(event, opts) { 
    // your event handler code here 
    // argument opts is the slideshow's option hash 
}); 

そして、あなたのデータを使用して、すべてを完成させるために私は）ので、私はそれを少し変えJSでデータモデルを書く好む：

https://jsfiddle.net/pegla/hwrtrzkh/3/