javascript - 如何更改两个不同类中的两个id CSS

这就是我要的东西。

我正在使用轮播，该轮播会在SVG的7个图标中滑动。每个图标都有一个id。

我正在使用以下CSS更改当前显示的图标的CSS：

.slick-current #icon-1 path {
  fill: rgb(252, 238, 33);
}

.slick-current是div的类，#icon-1是该svg内的div元素。

随着轮播的进行，我有7种CSS样式，例如上面的一种，以当前图标为目标并应用不同的颜色。我想同时执行的操作是使用不同的图标定位不同的div并对其应用一些CSS。例如：

如果slick-current具有与#icon-1的svg，则我想更改包含svg .slick-active的#icon-3 div。有什么办法可以将这两个结合在一起？

轮播代码：

        <div class="col-1 slider-cat-nav" id="slider_categories">
      <div>
        <img class="svg cat-icons-op" id="digital_icon" src="img/icons/icon-d.svg">
      </div>
      <div>
        <img class="svg cat-icons-op" id="inspire_icon" src="img/icons/icon-tools.svg">
      </div>
      <div>
        <img class="svg cat-icons-op" id="perform_icon" src="img/icons/icon-search.svg">
      </div>
      <div>
        <img class="svg cat-icons-op" id="automate_icon" src="img/icons/icon-rocket.svg">
      </div>
      <div>
        <img class="svg cat-icons-op" id="develop_icon" src="img/icons/icon-ab.svg">
      </div>
      <div>
        <img class="svg cat-icons-op" id="design_icon" src="img/icons/icon-tools.svg">
      </div>
      <div>
        <img class="svg cat-icons-op" id="plan_icon" src="img/icons/icon-rocket.svg">
      </div>
    </div>

Slick.js代码：

  $('.slider-cat-name').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-cat-nav',
speed: 1000,
});

$('.slider-cat-nav').slick({
slidesToShow: 5,
slidesToScroll: -1,
arrows: false,
asNavFor: '.slider-cat-name',
vertical: true,
//autoplay: true,
autoplaySpeed: 3000,
speed: 1000,
draggable: false
});

slick.js将.slick-current和。slick-active类以及其他类添加到div中。

输出看起来像这样：

<div class="col-1 slider-cat-nav slick-initialized slick-slider slick-vertical" id="slider_categories">
  <div aria-live="polite" class="slick-list" style="height: 520px;"><div class="slick-track" role="listbox" style="opacity: 1; height: 1768px; transform: translate3d(0px, -520px, 0px);">
    <div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide10" style="width: 42px;">
        <img class="svg cat-icons-op" id="digital_icon" src="img/icons/icon-d.svg">
    </div>
    <div class="slick-slide slick-active" data-slick-index="1" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide11" style="width: 42px;">
        <img class="svg cat-icons-op" id="inspire_icon" src="img/icons/icon-tools.svg">
    </div>
    <div class="slick-slide slick-active" data-slick-index="2" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide12" style="width: 42px;">
        <img class="svg cat-icons-op" id="perform_icon" src="img/icons/icon-search.svg">
    </div>
    <div class="slick-slide slick-active" data-slick-index="3" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide13" style="width: 42px;">
        <img class="svg cat-icons-op" id="automate_icon" src="img/icons/icon-rocket.svg">
    </div>
    <div class="slick-slide slick-active" data-slick-index="4" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide14" style="width: 42px;">
        <img class="svg cat-icons-op" id="develop_icon" src="img/icons/icon-ab.svg">
    </div>
  </div>
</div>

最佳答案

如果仅用于一维，那么使用常规~和相邻的+兄弟选择器可能会取得一些成功，但是对于涉及到子级的选择器，我认为纯CSS不可能实现。如果我做对了（HTML / JS示例会有所帮助），处理这些情况的方法是通过脚本在父元素上设置一些标志，并根据它自定义子代的规则（这应该不是问题）考虑到您正在使用轮播）。例如，在父级上设置data-active-element="icon-1"属性时，规则可能是：

[data-active-element="icon-1"] .slick-active #icon-3 { whatever }

不是很优雅，但可以工作。

对于JavaScript部分，在您的情况下see the doc of the Slick library，“事件”部分；还没有测试过，但是设置父级的属性可能会像这样：

$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  nextSlide.parent().attr('data-active-element', nextSlide.attr('id'));
});

参考
General sibling selectors，
Adjacent sibling selectors

关于javascript - 如何更改两个不同类中的两个id CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46129943/