Question

很抱歉，如果我的问题太愚蠢或相对，但是我在jquery中是如此新手...无论如何，我正在尝试在幻灯片的父div上添加一些背景字母（在伪元素之前：）基于aria隐藏值...

这是针对托管的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

西里尔君士坦丁你好

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

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

});

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

2 个答案: