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

Question

这就是我要找的东西。

我正在使用旋转木马，它可以滑过 7 个 svg 的图标。每个图标都有一个 id。

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

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

.slick-current 是 div 的一个类，#icon-1 是 div 中的一个 svg 元素。

随着轮播的进行，我有 7 个 css 样式，如上面的样式，它们针对当前图标并应用不同的颜色。我想同时做的是用不同的图标定位不同的 div 并对其应用一些 css。例如:

如果 slick-current 有一个带有 #icon-1 的 svg 那么我想更改 .slick-active 包含 svg #icon-3。有什么办法可以将这两者结合起来吗？

轮播代码:

        <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-current 和 .slick-active 等类是由 slick.js 添加到 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>

Answer 1

如果它只是一个维度，你可能会在一般的 ~ 和相邻的 + 兄弟选择器上取得一些成功，但是对于涉及到的 child ，我认为这是不可能的纯 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