Можно ли добавить ClassClass, RemoveClass на основе скрытых значений арии?

Question

Извините, если мой вопрос слишком глупый или не относительный, но я так новичок в jquery ... В любом случае, я пытаюсь добавить несколько фоновых букв (с псевдоэлементом: before) в родительский div слайд-шоу на основе скрытых от арии значений ...

Это для хостинга cms (своего рода конструктор сайтов DIY), и у меня нет доступа к html, но только к главному разделу сайта. Таким образом, в родительском div у меня есть некоторый контент (заголовок, текст, кнопка) с левой стороны и предварительно установленное слайд-шоу с правой стороны - слайд-шоу имеет регулярную структуру ul и 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

Здравствуйте, Кирилл Константин

Вот какое-то решение, которое я пробовал, может помочь вам попробовать это

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 совершенно не нужен.

Этого фрагмента должно быть достаточно для добавления класса CSS в div.landing-section на основе значений aria-hiddenдочерние элементы li:

  $(".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");

Вы можете увидеть его в действии на кодовая ручка .Я упростил ваш HTML, чтобы сделать его более читабельным.

Если вы изучаете jQuery, полезно подумать о следующем синтаксисе:

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

Официальная документация Также очень полезно в качестве ссылки.Я бы порекомендовал взглянуть на это.