是否可以基于aria隐藏值addClass，removeClass？

Question

对不起，如果我的问题太愚蠢或不相关，但我是如此新手jquery ...无论如何，我试图在基于咏叹调的幻灯片的父div上添加一些背景字母（带：在伪元素之前） - 隐藏的价值......

这是一个托管的cms（一种DIY网站建设者），我无法访问HTML，但只能访问网站的主管部分。因此，在父div中，我在左侧有一些内容（标题，文本，按钮），在右侧有预先安装的幻灯片 - 幻灯片显示有ul和li的常规结构，但是没有任何“活动”类可见幻灯片 - 我发现的唯一变化是所有的li都有aria-hidden =“true”而可见的（活动的）更改为aria-hidden =“false”，所以我必须坚持这个......在父元素上添加my：before伪元素。

CSS

        .brandName:before{
                content: 'BRAND NAME';
                color: #d2dbdc;
                position: absolute;
                left: 50%;
                top: 50%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%); 
                -ms-transform: translate(-50%, -50%); 
                -o-transform: translate(-50%, -50%); 
                transform: translate(-50%, -50%); 
                opacity: 0.6;
                font-family: "Lato",sans-serif,"google";
                font-weight: 700;
                letter-spacing: 5vw;
                font-size: 7vw;
                z-index: -1;
        }

HTML

<div class="landing-section">

  <div class="left-side">
    <h1>Some Heading</h1>
    <p>Some text</p>
    <button>Some Button</button>
  </div>

  <div class="right-side">
    <div id="cc-m-gallery-7739661064" class="cc-m-gallery-container            cc-m-gallery-slider                                  ">
      <div class="bx-wrapper" style="max-width: 100%;">
        <div class="bx-viewport" aria-live="polite" style="width: 100%; overflow: hidden; position: relative; height: 583px;">
                <ul style="width: 9215%; position: relative; transition-duration: 0s; transform: translate3d(-560px, 0px, 0px);">

                        <li aria-hidden="true" style="float: left; list-style: none; position: relative; width: 558px; margin-right: 2px;" class="bx-clone" >
                              <img src="https://image/path/cms/image.png" data-orig-width="650" data-orig-height="680" alt="" style="height: 583.247px;">
                        </li>

                        <li aria-hidden="false" style="float: left; list-style: none; position: relative; width: 558px; margin-right: 2px;" >
                          <a href="/products/"><img src="https://image/path/cms/image.png" data-orig-width="650" data-orig-height="680" alt="thatBrand is super" style="height: 583.247px;"><div class="bx-caption" style="width: 533.516px; margin-left: 12px;"><span>thatBrand is super</span></div></a> 
                        </li>

                        <li aria-hidden="true" style="float: left; list-style: none; position: relative; width: 558px; margin-right: 2px;">
                          <a href="/products/">    <img src="https://image/path/cms/image.png" data-orig-width="650" data-orig-height="680" alt="another brand image" style="height: 583.247px;"><div class="bx-caption"><span>another brand image</span></div> </a> 
                        </li>


                        <li aria-hidden="true" style="float: left; list-style: none; position: relative; width: 558px; margin-right: 2px;">
                          <img src="https://image/path/cms/image.png" data-orig-width="650" data-orig-height="680" alt="" style="height: 583.247px;">
                        </li>

                </ul>
        </div>
      </div>
    </div>  
  </div>
</div>

我尝试过类似的东西，但没有用......有什么想法？

    $('.cc-m-gallery-slider ul li:has(img[alt*="thatBrand"])').addClass('thatBrand-image');


         if ( $('li .thatBrand-image').is('[aria-hidden="false"]') ) {
            $('.landing-section').hasClass("brandName");
            $('.landing-section').addClass("brandName");
        } else {
           $('.landing-section').removeClass("brandName");
        }

Answer 1

您的代码有一些语法错误，而if语句完全没有必要。

这个片段应该足以根据子div.landing-section元素的aria-hidden值向li添加一个CSS类：

  $(".bx-viewport li[aria-hidden='false']").parents("div.landing-section").addClass("brandName");  

如果没有孩子li元素有aria-hidden=false，以下应删除该类：

  $("div.landing-section:not(:has(.bx-viewport li[aria-hidden='false']))").removeClass("brandName");

你可以在codepen上看到它。我简化了HTML以使其更具可读性。

如果您正在学习jQuery，那么考虑语法是有帮助的：

$("find-something").do_Something();

official documentation也非常有用作为参考。我建议你试一试。

Answer 2

你好Cyril Constantine

这是我试过的一些解决方案可能会帮助你试试这个

HTML：

    <div class="landing-section">

    <div class="right-side">
        <div class="cc-m-gallery-slider">

          <ul class="bxslider">
            <li>
              <a href="/products/"><img src="https://via.placeholder.com/150"></a>
            </li>
            <li>
              <a href="/products/">
                <img src="https://via.placeholder.com/150" alt="thatBrand is super">
              </a>
            </li>
            <li>
              <a href="/products/">
                <img src="https://via.placeholder.com/150" alt="another brand image">
              </a>
            </li>
            <li>
              <img src="https://via.placeholder.com/150">
            </li>
          </ul>

        </div>
    </div>
</div>

JS：

$( document ).ready(function() {

    $('.bxslider').bxSlider({
      mode: 'fade',
      captions: true,
      slideWidth: 600,
      onSlideAfter:function(){
        $('.bxslider [aria-hidden="false"]').addClass('brandName');
        $('.bxslider [aria-hidden="true"]').removeClass('brandName');
      },
      onSliderLoad:function(){
        $('.bxslider [aria-hidden="false"]').addClass('brandName');
        $('.bxslider [aria-hidden="true"]').removeClass('brandName');
      }
    });

});