如何定位 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

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

W3学校参考

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>

希望这会有所帮助！！ 谢谢