Показывать дочерний элемент только тогда, когда элемент списка имеет определенный класс

Question

У меня есть эта карусель. Элемент списка с классом indicator показывает, где я сейчас нахожусь в карусели, и находится поверх других элементов списка с абсолютной позицией. Как вы можете видеть, каждый второй элемент списка содержит привязку.

Прямо сейчас каждый элемент списка имеет привязку в качестве дочернего элемента.

Теперь я хочу показать привязку только тогда, когда элемент списка имеет класс main-pos.

<ul class="carousel">
  <li class="indicator"></li>

  <li class="items main-pos" onclick="currentSlide(1)" id="1">
    <a href="#about">item 1</a>
  </li>
  <li class="items right-pos" onclick="currentSlide(2)" id="2">
    <a href="#">item 2</a>
  </li>
  <li class="items back-pos" onclick="currentSlide(3)" id="3">
    <a href="#">item 3</a>
  </li>
  <li class="items back-pos" onclick="currentSlide(4)" id="4">
    <a href="#">item 4</a>
  </li>
  <li class="items back-pos" onclick="currentSlide(5)" id="5">
    <a href="#">item 5</a>
  </li>
  <li class="items back-pos" onclick="currentSlide(6)" id="6">
    <a href="#">item 6</a>
  </li>
  <li class="items left-pos" onclick="currentSlide(7)" id="7">
    <a href="#">item 7</a>
  </li>
</ul>

Answer 1

Вы можете использовать функцию if в вашем коде, чтобы проверить, соответствует ли элемент классу, а затем, если это так, сделать что-то.

Вот что я имею в виду:

let carousel = document.getElementById("carousel")
if (carousel.classList.contains(class);) {
  //do something
} else {
return: null;
}

Answer 2

Не все так просто?

.items a {display: none;}
.items.main-pos a {display: block;}
.items.main-pos span {display: none;}

Answer 3

вы можете попробовать добавить дополнительные промежутки, которые отображаются в тех случаях, когда вы не хотите привязывать тег

Я добавил angular stackblitz, но он ничего не использует angular Speci c

Вот html и css для вашей справки

  <ul class="carousel">
  <li class="indicator"></li>

  <li class="items main-pos" onclick="currentSlide(1)" id="1">
      <a href="#about">item 1</a>
      <span>item 1</span>
  </li>
  <li class="items right-pos" onclick="currentSlide(2)" id="2">
      <a href="#">item 2</a>
      <span>item 2</span>
  </li>
  <li class="items back-pos" onclick="currentSlide(3)" id="3">
      <a href="#">item 3</a>
      <span>item 3</span>
  </li>
  <li class="items back-pos" onclick="currentSlide(4)" id="4">
      <a href="#">item 4</a>
      <span>item 4</span>
  </li>
  <li class="items back-pos" onclick="currentSlide(5)" id="5">
      <a href="#">item 5</a> 
      <span>item 5</span>                                          
  </li>
  <li class="items back-pos" onclick="currentSlide(6)" id="6">
      <a href="#">item 6</a>
      <span>item 6</span>                  
  </li>
  <li class="items left-pos" onclick="currentSlide(7)" id="7">
      <a href="#">item 7</a>
      <span>item 7</span>
  </li>
</ul>

.back-pos a, .right-pos a, .left-pos a {
    display: none;
}
.main-pos span {
   display: none;
}

https://stackblitz.com/edit/angular-fehftq