Обновить меню выбора по хэштегу URL

Question

Я пытаюсь обновить меню выбора, чтобы оно соответствовало каждому слайду в слайд-шоу. На самом деле, слайд-шоу можно добавить в закладки с помощью хэштега, который обновляется для каждого слайда. Мое меню выбора имеет класс для каждой опции, который соответствует хэштегам для каждого слайда. Я использую 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

Вы можете ясно увидеть, как выбрать свой элемент в ddsclick selectbox:

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

Cycle2 документация:

http://jquery.malsup.com/cycle2/api/

здесь вы можете увидеть, что есть событие с именем 'цикл-после', которое запускается после загрузки следующего слайда, и его использование выглядит следующим образом:

$( '#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/