0

Нужно сделать так чтобы при нажатии на ссылку свое положение меняли части иконки. Проблема в том что при нажатии на вторую по счету ссылку меняется иконка в первой ссылке. Не могу разобраться как сделать так чтобы эти два элемента иконки span_left и span_right имели селектор [i] а не [0] или любое числовое значение и возможно ли вообще так сделать. Сам в JS не особо шарю так что не могу довести до конца.

for ( var i = 0; i < links.length; i++) {
links[i].onclick = function() {
  span_left[0].classList.toggle("left-part_closed");
  span_right[0].classList.toggle("right-part_closed");
}
}

Вот ссылка для полной картины https://codepen.io/skylog8/pen/NWGOKdZ

Никита
  • 5
  • 2

1 Answers1

0

Нужно объявить переменную в цикле через let. Так как для переменной объявленной таким образом на каждой итерации создается новое значение. Если использовать var, то после выполнения цикла переменная i в данном случае будет равна 1. Соответственной для всех элементов, результат выполнения кода можно описать так:

    links[i].onclick = function() {
      span_left[1].classList.toggle("left-part_closed");
      span_right[1].classList.toggle("right-part_closed");
    }

Если же использовать let, то будет выглядеть вот так:

    links[i].onclick = function() {
      span_left[i].classList.toggle("left-part_closed");
      span_right[i].classList.toggle("right-part_closed");
    }


var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");


var panel = this.nextElementSibling;
if (panel.style.display === "block") {
  panel.style.display = "none";
} else {
  panel.style.display = "block";
}



});
}


var links = document.getElementsByClassName('accordion');
var span_left = document.getElementsByClassName('ty-open-icon-left');
var span_right = document.getElementsByClassName('ty-open-icon-right');


for (let i = 0; i < links.length; i++) {
  links[i].onclick = function() {
    span_left[i].classList.toggle("left-part_closed");
    span_right[i].classList.toggle("right-part_closed");
  }
}


// Как вариант
//for ( var i = 0; i < links.length; i++) {
//links[i].onclick = function() {
//  this.children[0].classList.toggle("left-part_closed");
//  this.children[1].classList.toggle("right-part_closed");
//}
//}
p {
  margin: 0;
} 

.accordion {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  transition: 0.4s;
  margin-left: 50%;
  display: block;
}

.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
  margin-left: 50%;
}

.ty-faq-icon-parent {
  display: flex;
  flex-direction: row;
  margin-left: -20px;
}

.ty-open-icon-left {
  display: block;
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #000;
  transform: rotate(45deg);
  margin-left: -13px;
  transition: all 0.3s ease;
}

.ty-open-icon-right {
  display: block;
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #000;
  transform: rotate(-45deg);
  transition: all 0.3s ease;
}

.left-part_closed {
  margin-left: -6px;
}

.right-part_closed {
  margin-left: -6px;
}
<a id="AccBtn" class="accordion">
  <span id="left_side" class="ty-open-icon-left"></span>
  <span id="right_side" class="ty-open-icon-right"></span>
  <p class="ty-faq-question">Как сделать заказ</p>
</a>
  <div class="panel">
    <p class="ty-faq-answer">Оформить заказ можно по телефону, через WhatsApp,    почту или просто через корзину сайта.</p>
  </div>
<a class="accordion">
  <span class="ty-open-icon-left"></span>
  <span class="ty-open-icon-right"></span>
    <p class="ty-faq-question">Как сделать заказ</p>
</a>
<div class="panel">
  <p class="ty-faq-answer">Оформить заказ можно по телефону, через WhatsApp, почту или просто через корзину сайта.</p>
</div>
Anynomius
  • 1,216