Question

我想使用CSS / JavaScript隐藏基于另一个数据元素的元素。使用我不想搞砸的标准javascript来控制类和数据元素。

<span role="img" data-slide="3" aria-label="Item 3 of 5 displayed" class="sapMCrslActive">3</span>

所以当上面的范围包含data-slide="3"且包含class="sapMCrslActive"时。

我想调用它：

.sapMCrslHud .sapMCrslNext {
    visibility: hidden;
}

隐藏此元素：

<a class="sapMCrslNext" href="#" data-slide="next" tabindex="-1">
 <div class="sapMCrslArrowInner"><span id="__carousel0-arrowScrollRight" data-sap-ui="__carousel0-arrowScrollRight" role="presentation" aria-hidden="true" data-sap-ui-icon-content="" class="sapUiIcon sapUiIconMirrorInRTL" style="font-family:'SAP-icons'"></span>
</div></a>

完整的Html元素：

    <div id="__carousel0" data-sap-ui="__carousel0" data-sap-ui-fastnavgroup="true" data-sap-ui-customfastnavgroup="true" style="width:100%;height:100%" class="sapMCrsl sapMCrslFluid sapUiContentPadding" tabindex="0" role="list" aria-activedescendant="__carousel0-__box25-slide">
    <div class="sapMCrslInner sapMCrslBottomOffset" style="transform: translate3d(-1280px, 0px, 0px);">
        <div class="sapMCrslItem sapMCrslActive" id="__carousel0-__box21-slide" role="listitem" aria-posinset="1" aria-setsize="5">
            <div id="__container1" data-sap-ui="__container1" style="width: 100%; height: 100%; overflow: hidden;" class="sapMScrollCont">
                <div id="__container1-scroll" class="sapMScrollContScroll">
                    <div class="sapMCrslItemTable" data-sap-ui-preserve="__html0" id="__html0">
                        <div class="sapMCrslItemTableCell">
                            <div id="__box21" data-sap-ui="__box21" class="bgColor sapMFlexBox sapMFlexBoxAlignContentStretch sapMFlexBoxAlignItemsCenter sapMFlexBoxBGTransparent sapMFlexBoxJustifyStart sapMFlexBoxWrapNoWrap sapMVBox"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sapMCrslItem sapMCrslActive" id="__carousel0-__box22-slide" role="listitem" aria-posinset="2" aria-setsize="5">
            <div id="__container2" data-sap-ui="__container2" style="width: 100%; height: 100%; overflow: hidden;" class="sapMScrollCont">
                <div id="__container2-scroll" class="sapMScrollContScroll">
                    <div class="sapMCrslItemTable" data-sap-ui-preserve="__html1" id="__html1">
                        <div class="sapMCrslItemTableCell">
                            <div id="__box22" data-sap-ui="__box22" class="bgColor sapMFlexBox sapMFlexBoxAlignContentStretch sapMFlexBoxAlignItemsCenter sapMFlexBoxBGTransparent sapMFlexBoxJustifyStart sapMFlexBoxWrapNoWrap sapMVBox"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sapMCrslItem sapMCrslActive" id="__carousel0-__box23-slide" role="listitem" aria-posinset="3" aria-setsize="5">
            <div id="__container3" data-sap-ui="__container3" style="width: 100%; height: 100%; overflow: hidden;" class="sapMScrollCont">
                <div id="__container3-scroll" class="sapMScrollContScroll">
                    <div class="sapMCrslItemTable" data-sap-ui-preserve="__html2" id="__html2">
                        <div class="sapMCrslItemTableCell">
                            <div id="__box23" data-sap-ui="__box23" class="bgColor sapMFlexBox sapMFlexBoxAlignContentStretch sapMFlexBoxAlignItemsCenter sapMFlexBoxBGTransparent sapMFlexBoxJustifyStart sapMFlexBoxWrapNoWrap sapMVBox"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sapMCrslItem sapMCrslActive" id="__carousel0-__box24-slide" role="listitem" aria-posinset="4" aria-setsize="5">
            <div id="__container4" data-sap-ui="__container4" style="width: 100%; height: 100%; overflow: hidden;" class="sapMScrollCont">
                <div id="__container4-scroll" class="sapMScrollContScroll">
                    <div class="sapMCrslItemTable" data-sap-ui-preserve="__html3" id="__html3">
                        <div class="sapMCrslItemTableCell">
                            <div id="__box24" data-sap-ui="__box24" class="bgColor sapMFlexBox sapMFlexBoxAlignContentStretch sapMFlexBoxAlignItemsCenter sapMFlexBoxBGTransparent sapMFlexBoxJustifyStart sapMFlexBoxWrapNoWrap sapMVBox"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sapMCrslItem sapMCrslActive" id="__carousel0-__box25-slide" role="listitem" aria-posinset="5" aria-setsize="5">
            <div id="__container5" data-sap-ui="__container5" style="width: 100%; height: 100%; overflow: hidden;" class="sapMScrollCont">
                <div id="__container5-scroll" class="sapMScrollContScroll">
                    <div class="sapMCrslItemTable" data-sap-ui-preserve="__html4" id="__html4">
                        <div class="sapMCrslItemTableCell">
                            <div id="__box25" data-sap-ui="__box25" class="bgColor sapMFlexBox sapMFlexBoxAlignContentStretch sapMFlexBoxAlignItemsCenter sapMFlexBoxBGTransparent sapMFlexBoxJustifyStart sapMFlexBoxWrapNoWrap sapMVBox"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="__carousel0-hud" class="sapMCrslHud sapMCrslHudBottom sapMCrslRightmost">
        <a class="sapMCrslPrev" href="#" data-slide="prev" tabindex="-1">
            <div class="sapMCrslArrowInner"><span id="__carousel0-arrowScrollLeft" data-sap-ui="__carousel0-arrowScrollLeft" role="presentation" aria-hidden="true" data-sap-ui-icon-content="" class="sapUiIcon sapUiIconMirrorInRTL" style="font-family:'SAP-icons'"></span>
            </div>
        </a>
        <a class="sapMCrslNext" href="#" data-slide="next" tabindex="-1">
            <div class="sapMCrslArrowInner"><span id="__carousel0-arrowScrollRight" data-sap-ui="__carousel0-arrowScrollRight" role="presentation" aria-hidden="true" data-sap-ui-icon-content="" class="sapUiIcon sapUiIconMirrorInRTL" style="font-family:'SAP-icons'"></span>
            </div>
        </a>
    </div>
    <div class="sapMCrslControlsNoArrows sapMCrslControlsBottom">
        <div id="__carousel0-pageIndicator" style="" class="sapMCrslBulleted">  <span role="img" data-slide="1" aria-label="Item 1 of 5 displayed" class="">1</span>
<span role="img" data-slide="2" aria-label="Item 2 of 5 displayed" class="">2</span>
<span role="img" data-slide="3" aria-label="Item 3 of 5 displayed" class="">3</span>
<span role="img" data-slide="4" aria-label="Item 4 of 5 displayed" class="">4</span>
<span role="img" data-slide="5" aria-label="Item 5 of 5 displayed" class="sapMCrslActive">5</span>
        </div>
    </div>
</div>

Answer 1

试试这个

if($("span[data-slide=3].sapMCrslActive").length) {
  $('.sapMCrslHud .sapMCrslNext').css('visibility', 'hidden');
}

Answer 2

如果幻灯片处于活动状态，您将不得不使用间隔来定期检查：

setInterval(function(){
    if($("span.sapMCrslActive[data-slide=3]").length > 0) {
        $('.sapMCrslHud .sapMCrslNext').css('visibility', 'hidden');
    }else{
        $('.sapMCrslHud .sapMCrslNext').css('visibility', 'visible');
    }
}, 50);

根据另一个元素的data属性隐藏元素

2 个答案: