是否可以基于 aria-hidden 值添加类、删除类？

Question

对不起，如果我的问题太愚蠢或不相关，但我在 jquery 中是如此的新手......无论如何，我正在尝试在幻灯片的父 div 上添加一些背景字母（带有 :before 伪元素）基于 aria-hidden 值...

这是一个托管的 cms（一种 DIY 网站构建器），我无法访问 html，但只能访问网站的 head 部分。因此，在父 div 中，我在左侧有一些内容（标题、文本、按钮），在右侧有预安装的幻灯片 - 幻灯片具有 ul 和 li 的常规结构，但是没有任何“活动”类可见幻灯片 - 我检测到的唯一变化是所有 li 都有 aria-hidden="true" 而可见的（活动的）更改为 aria-hidden="false"，所以我必须坚持这个......在父级上添加我的 :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

你好西里尔康斯坦丁

这是我尝试过的一些解决方案，它可能会帮助您尝试这个

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');
      }
    });

});

Answer 2

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

这个 sn-p 应该足以根据子 li 元素的 aria-hidden 值将 CSS 类添加到 div.landing-section：

  $(".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 作为参考也很有帮助。我建议你看看。