Question

我需要从jQuery Cycle2幻灯片中删除一个元素，因为它会导致可访问性问题。这是幻灯片放映中的第一张幻灯片，包含HTML内容，因此它位于sentinel div中。

像这样的简单jQuery命令不起作用：

$( '.cycle-sentinel .cycle-search' ).destroy();

即使我尝试使用循环初始化的回调（赞美，我不确定我是否正确使用它）。要使页面符合ADA，我需要能够删除该表单或对某些元素进行更改。这是相关的幻灯片html：

<div class="cycle-slide cycle-sentinel" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;">
<img src="image.jpg" width="100%" alt="alt" style="visibility: hidden;">
<div class="cycle-search" style="visibility: hidden;">
<!-- role="search" -->
    <form method="get" class="searchform" action="#" style="visibility: hidden;">
                <label for="s2" class="screen-reader-only" style="visibility: hidden;">Enter search term</label>
            <input type="text" value="" class="homeform" placeholder=" ? Find information, services, agencies and more..." style="visibility: hidden;">                     
                    <button type="submit" class="home-search-button" style="visibility: hidden;">
                        <i class="fa fa-search" style="visibility: hidden;"></i><span class="screen-reader-only" style="visibility: hidden;">Search</span>
                    </button>
            </form>
    </div>
<script>
    jQuery(function($) {
    $("#s2").focus(function() {
        $(".cycle-slideshow").cycle("pause");
    });

    $("#s2").focusout(function() {
        $(".cycle-slideshow").cycle("resume");
    });
    $( '#mySlideshow' ).on( 'cycle-initialized', function( event, optionHash ) {
        $( '.cycle-sentinel .cycle-search' ).destroy();
    }); 
    });
</script>

顺便说一下，可访问性问题是第一张幻灯片中重复了标记幻灯片，因此我有两个标签附加到同一个ID（使用＆＃34; for＆＃34;）。

Answer 1

In latest version of cycle 2 plugin they removed  id/name from sentinel content.

请查看此jsfiddle示例。

Answer 2

我找到了一个使用cycle2设置的解决方案。 sentinel幻灯片用于设置幻灯片高度，但您可以实现与之相关的几个选项。一种是使用幻灯片中的任何幻灯片作为哨兵。由于只有我的第一张幻灯片有一个表格，我使用了第二张幻灯片，因此：

data-cycle-auto-height=0

对于所有选项，请参阅：http://jquery.malsup.com/cycle2/api/#auto-height。该表单仅在html中出现一次，如可访问性所要求的那样。

如何从Cycle2 sentinel中删除一个元素

2 个答案: