正如标题所示，我在尝试使用 JavaScript 获取某些 HTML div 的值时遇到了麻烦。
我有两个独立的函数，它们实际上是同等编写的，但是在 showDiv1 中， 'var allCharacters = container.querySelectorAll('.planet-waves-container > div');'返回一个包含值的实际列表，在revealDiv1中它只返回[object NodeList]
这是 HTML 片段：
<div class="planet-waves" id="planet-waves">
<div class="titulo1">Planet Waves</div>
<div class="grupo-botoes">
<div class="klee-rad" id="klee" name="checkbox1" value="klee" onclick="toggleButton('klee','grupo-botoes'); moveDiv1('klee');"></div>
<div class="ayaka-rad" id="ayaka" name="checkbox1" value="ayaka" onclick="toggleButton('ayaka','grupo-botoes'); moveDiv1('ayaka');"></div>
<div class="ningguang-rad" id="ningguang" name="checkbox1" value="ningguang" onclick="toggleButton('ningguang','grupo-botoes'); moveDiv1('ningguang');"></div>
<div class="zhongli-rad" id="zhongli" name="checkbox1" value="zhongli" onclick="toggleButton('zhongli','grupo-botoes'); moveDiv1('zhongli');"></div>
</div>
<div class="planet-waves-container">
<div class="klee">
<img src="../Dados/Genshin_html_images/Teams/Planet%20Waves/Character_Klee_Full_Wish.png">
<div class="klee-bot">
<div class="solar" id="solar" name="checkbox1.1" value="solar" onclick="toggleButton('solar','klee-bot'); revealDiv1('solar','klee')"></div>
<div class="shim" id="shim" name="checkbox1.1" value="shim" onclick="toggleButton('shim','klee-bot'); revealDiv1('shim','klee')"></div>
</div>
<div class="klee-textos">
<div class="texto-solar">
<div class="titulo3">Solar Pearl</div>
<div class="corpo-descricao-4">
<p>Base ATK: 510; CRIT Rate 27.6%</p>
<p>Solar Shine: Normal Attack hits increase Elemental Skill and Elemental Burst DMG
by 20~40% for 6s. Likewise, Elemental Skill or Elemental Burst hits increase Normal
Attack DMG by 20~40% for 6s.</p>
</div>
</div>
<div class="texto-shim">
<div class="titulo3">Shimenawa's Reminiscence ④</div>
<div class="corpo-descricao-4">
<p>2 Piece: ATK +18%</p>
<p>4 Piece: When casting an Elemental Skill, if the character has 15 or more Energy,
they lose 15 Energy and Normal/Charged/Plunging Attack DMG is increased by 50% for
10s. This effect will not trigger again during that duration.</p>
</div>
</div>
</div>
</div>
JavaScript 函数 showDiv1():
function moveDiv1(character) {
console.log("moveDiv1 function called with character: " + character);
var container = document.querySelector('.planet-waves-container');
var characterDivImg = container.querySelector('.' + character + ' img');
var characterDivItems = container.querySelector('.' + character + ' .' + character + '-bot');
var characterDivItemsDescr = container.querySelector('.' + character + ' .' + character + '-textos');
var allDivs = container.querySelectorAll('div[class$="-rad"]');
var allCharacterDivsImg = container.querySelectorAll('.planet-waves-container > div img');
var allCharacters = container.querySelectorAll('.planet-waves-container > div');
var allCharacterDivsItems = [];
allCharacters.forEach(function(character) {
allCharacterDivsItems.push(container.querySelectorAll('.'+character.classList[0]+' > div'));
});
console.log("All characters: ", allCharacters);
console.log("All character div items: ", allCharacterDivsItems);
console.log("Character Image: ", characterDivImg);
console.log("Character Items: ", characterDivItems);
allCharacterDivsImg.forEach(function(div) {
console.log("Adding hide2 class to all img elements");
div.classList.add('hide2');
});
for (let i = 0; i < allCharacterDivsItems.length; i++) {
allCharacterDivsItems[i].forEach(function(div) {
console.log("Adding hide2 class to div items");
div.classList.add('hide2');
});
}
characterDivImg.classList.remove('hide2');
characterDivImg.classList.remove('hide1');
characterDivItems.classList.remove('hide2');
characterDivItems.classList.remove('hide1');
characterDivItemsDescr.classList.remove('hide2');
characterDivItemsDescr.classList.remove('hide1');
container.classList.remove('show1');
setTimeout(function() {
console.log("Adding show1 class to images and items");
characterDivImg.classList.add('show1');
characterDivItems.classList.add('show1');
characterDivItemsDescr.classList.add('show1');
}, 0);
return allCharacters;
}
JavaScript 函数 RevealDiv1():
function revealDiv1(item, character) {
var container = document.querySelector('.planet-waves-container');
var characterDivItemsDescr = container.querySelector('.' + character + '-textos');
var itemDescr = characterDivItemsDescr.querySelector('.texto-' + item);
var allItems = [];
var allCharacters = container.querySelectorAll('.planet-waves-container > div');
var allCharacterDivsItems = [];
console.log("All Characters: " + allCharacters)
allCharacters.forEach(function(character) {
allCharacterDivsItems.push(container.querySelectorAll('.'+character.classList[0]+' > div'));
});
console.log("All Character Divs Items: " + allCharacterDivsItems)
console.log('All Items: ' + allItems)
var allCharacterDivItemsDescr = [];
console.log('All Character Items Descriptions: ' + allCharacterDivItemsDescr);
allCharacterDivItemsDescr.forEach(function(div) {
div.classList.add('vanish');
});
itemDescr.classList.remove('vanish');
container.classList.remove('vanish');
setTimeout(function() {
itemDescr.classList.add('reveal');
}, 500);
}
预先感谢您的帮助！
我已经尝试了几乎所有的方法，但我正在为大学做加班，并且已经有一段时间没有睡好觉了。所以我似乎无法弄清楚这一点。
在您的函数中
moveDiv1console.log("All characters: ", allCharacters);revealDiv1console.log("All Characters: " + allCharacters)