javascript - 通过 URL 主题标签更新选择菜单

Question

我正在尝试更新选择菜单以匹配幻灯片放映中的每张幻灯片。事实上，幻灯片放映是可收藏的，在每张幻灯片更新的 URL 上都有一个主题标签。我的选择菜单中的每个选项都有一个类，它与每张幻灯片的主题标签相匹配。我使用 Cycle2 制作幻灯片，使用 DDslick 制作下拉菜单。但是，即使禁用了 DDslick，我的 javascript 也无法更新选择菜单。

现在这是我的 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 selectbox中选择你的元素:

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

Cycle2 文档:

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

在这里你可以看到有一个叫做'cycle-after'的事件是在下一张幻灯片加载完成后触发的，用法是这样的:

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