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

是的，例如，您可以使用document.getElementsByClasName('slide-up')[1]。此方法将返回具有类slide-up的HTML DOM元素列表。

W3Schools Reference

Answer 2

如果您只需要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 3

尝试一下：

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>

希望这会有所帮助！ 谢谢

如何定位div的第二类？

3 个答案: