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选择框中选择元素：

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

按URL主题标签更新选择菜单

1 个答案: