如何在div中获取class="selected"
的值,我尝试了以下代码,但获得了undefined
<div class="myTest1" title="testTitle1" id="test1" >
<div>answer 1</div>
<div>answer 2</div>
<div>answer 3</div>
<div class="selected">answer 4</div>
</div>
<div class="myTest2" title="testTitle2" id="test2">
<div >
<div>answer 1</div>
<div>answer 2</div>
<div class="selected">answer 3</div>
<div>answer</div>
</div>
</div>
<div class="myTest3" title="testTitle2" id="test3">
<div >
<div>answer 1</div>
<div class="selected">answer 2</div>
<div >answer 3</div>
<div>answer 4</div>
</div>
</div>
JS代码:
我意识到我的代码没有得到优化,并且我使用了三个for
循环。
var test1= document.getElementById("test1");
var test2= document.getElementById("test2");
var test3= document.getElementById("test3");
for (var i=0; i<test1.length; i++) {
var sel1 = document.getElementsByClassName("selected");
alert(quizAns1[i].innerHTML);
}
for (var i=0; i<test2.length; i++) {
var sel2 = document.getElementsByClassName("selected");
alert(sel2[i].innerHTML);
}
for (var i=0; i<test3.length; i++) {
var sel3 = document.getElementsByClassName("selected");
alert(sel3[i].innerHTML);
}
答案 0 :(得分:1)
只需直接基于类查询元素,然后循环遍历结果。另外,为每个问题分配相同的课程,以便可以更轻松地将它们分组。
@HostListener('document:click', ['$event'])
public handleClick(event: Event): void {
if (event.target instanceof HTMLAnchorElement) {
const element = event.target as HTMLAnchorElement;
if (element.className === 'routerlink') {
event.preventDefault();
const route = element?.getAttribute('href');
if (route) {
this.router.navigate([`/${route}`]);
}
}
}
document.querySelectorAll("div.selected").forEach(function(item, index){
// Use .closest to get the nearest matching ancestor:
alert("For question " + item.closest(".myTest").id + ", you answered: " + item.textContent);
});
答案 1 :(得分:1)
您的错是试图获取元素的长度。
bar
我是新来的。我不能只留下评论,所以
答案 2 :(得分:1)
只需在所有DIV上添加相同的“类”,并进行代码更改即可。 并检查我希望的代码段。
var elementList = document.querySelectorAll(".selected");
for (i = 0, max = elementList.length; i < max; i++) {
let question = elementList[i].closest(".myTest").getAttribute ("id");
console.log(`Question: ${question} -> Answer: ${elementList[i].textContent} `);
}
<div class="myTest" title="testTitle1" id="test1" >
<div>answer 1</div>
<div>answer 2</div>
<div>answer 3</div>
<div class="selected">answer 4</div>
</div>
<div class="myTest" title="testTitle2" id="test2">
<div >
<div>answer 1</div>
<div>answer 2</div>
<div class="selected">answer 3</div>
<div>answer</div>
</div>
</div>
<div class="myTest" title="testTitle2" id="test3">
<div >
<div>answer 1</div>
<div class="selected">answer 2</div>
<div >answer 3</div>
<div>answer 4</div>
</div>
</div>
答案 3 :(得分:0)
如果您确实想每次准确定位目标div,我想您会在实际情况下这样做:
var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");
var test3 = document.getElementById("test3");
var sel1 = test1.querySelector('.selected');
var sel2 = test2.querySelector('.selected');
var sel3 = test3.querySelector('.selected');
答案 4 :(得分:0)
您应该这样做
<div class="myTest1" title="testTitle1" >
<div id="test1">
<div>answer 1</div>
<div>answer 2</div>
<div>answer 3</div>
<div class="selected">answer 4</div>
</div>
</div>
<div class="myTest2" title="testTitle2">
<div id="test2">
<div>answer 1</div>
<div>answer 2</div>
<div class="selected">answer 3</div>
<div>answer</div>
</div>
</div>
<div class="myTest3" title="testTitle2" >
<div id="test3" >
<div>answer 1</div>
<div class="selected">answer 2</div>
<div >answer 3</div>
<div>answer 4</div>
</div>
</div>
在您的js
中,
var test1= document.getElementById("test1");
var test2= document.getElementById("test2");
var test3= document.getElementById("test3");
for (var i=0; i<test1.length; i++) {
var sel1 = document.querySelector("#test1 .selected");
alert(sel1.innerHTML);
}
for (var i=0; i<test2.length; i++) {
var sel2 = document.querySelector("#test2 .selected");
alert(sel2.innerHTML);
}
for (var i=0; i<test3.length; i++) {
var sel3 = document.querySelector("#test3 .selected");
alert(sel3.innerHTML);
}
答案 5 :(得分:0)
您可以尝试以下方法:
for(let q = 1; q <= 3; ++q)
console.log("question", q, document.querySelector("#test" + q).querySelector(".selected").textContent);
<div class="myTest1" title="testTitle1" id="test1" >
<div>answer 1</div>
<div>answer 2</div>
<div>answer 3</div>
<div class="selected">answer 4</div>
</div>
<div class="myTest2" title="testTitle2" id="test2">
<div >
<div>answer 1</div>
<div>answer 2</div>
<div class="selected">answer 3</div>
<div>answer</div>
</div>
</div>
<div class="myTest3" title="testTitle2" id="test3">
<div >
<div>answer 1</div>
<div class="selected">answer 2</div>
<div>answer 3</div>
<div>answer 4</div>
</div>
</div>
希望这会有所帮助。