Как я нацеливаюсь на второй класс div?

Question

Итак, у меня есть эти div:

function classReturn(obj, target) {
  var className = document.querySelector("." + target);
  console.log("." + target);
  animateAdd(className);
}

function animateAdd(thisClass) {
  console.log(thisClass);
  thisClass.classList.add("animate");
  return;
}

<div class="block slide-up" onclick="classReturn(this,'slide-up')">
  <p>.slide-up</p>
</div>
<div class="block slide-down" onclick="classReturn(this,'slide- down')">
  <p>.slide-down</p>
</div>
<div class="block slide-left" onclick="classReturn(this,'slide- left')">
  <p>.slide-left</p>
</div>
<div class="block slide-right" onclick="classReturn(this,'slide- right')">
  <p>.slide-right</p>
</div>

Мой вопрос : есть ли способ вернуть второй класс предмета, по которому щелкают, без необходимости вставлять его встрока?

Это сэкономит некоторое время, вместо того, чтобы писать (this, 'className') каждый раз.

Answer 1

Если вам нужен только второй класс из classList:

function classReturn(obj) {
    console.log(obj.classList[1]); // returns "slide-down"
}

Хотя я должен добавить, что объединение js с вашим html не является хорошей практикой.Было бы лучше добавить прослушиватель событий для каждого div.block следующим образом:

const blocks = document.querySelectorAll('div.block');
blocks.forEach(block => block.addEventListener('click', e => {
    console.log(e.currentTarget.classList[1]);
}));

Answer 2

Попробуйте это:

function classReturn(obj) {
  // retrieve 2nd class of the div clicked
  var className = obj.classList[1];
  console.log("." + className);
  animateAdd(className);
}

function animateAdd(thisClass) {
  var div = document.getElementsByClassName(thisClass);
  div[0].classList.add("animate");
}

.animate {
  color: red;
}

<div class="block slide-up" onclick="classReturn(this,'slide-up')">
  <p>.slide-up</p>
</div>
<div class="block slide-down" onclick="classReturn(this,'slide- down')">
  <p>.slide-down</p>
</div>
<div class="block slide-left" onclick="classReturn(this,'slide- left')">
  <p>.slide-left</p>
</div>
<div class="block slide-right" onclick="classReturn(this,'slide- right')">
  <p>.slide-right</p>
</div>

Надежда будет полезна !! Спасибо

Answer 3

Да, вы можете использовать document.getElementsByClasName('slide-up')[1] например.Этот метод возвращает список элементов HTML DOM, которые имеют класс slide-up.

W3Schools Reference