我正在摆弄 javascript,我注意到它不会加载特定的代码行..
这一个...
function RoomClick(str, ID) {
RoomSelected();
_getRoomName = ID;
document.getElementById(_getRoomName).className = "RoomStyleSelected";
}
function RoomSelected() {
var divEls = document.getElementsByTagName("#Kati1 a")
var i = 0;
for (i = 0; i < divEls.length; i++) {
//alert(divEls[i].id);
_getRoomName = divEls[i].id;
document.getElementById(_getRoomName).className = "RoomStyle"; //part where it doesnt load.
}
}
function RoomClick(str, ID) {
RoomSelected();
_getRoomName = ID;
document.getElementById(_getRoomName).className = "RoomStyleSelected";
}
function RoomSelected() {
var divEls = document.getElementsByTagName("#Kati1 a")
var i = 0;
for (i = 0; i < divEls.length; i++) {
//alert(divEls[i].id);
_getRoomName = divEls[i].id;
document.getElementById(_getRoomName).className = "RoomStyle";
}
}
.RoomStyle {
position: relative;
width: 50px;
height: 30px;
float: left;
margin: 10px;
background-color: green;
border-radius: 5px;
font-family: 'Segoe UI';
font-size: 20px;
color: white;
cursor: pointer;
text-align: center;
}
.RoomStyleSelected {
position: relative;
width: 50px;
height: 30px;
float: left;
margin: 10px;
background-color: #00ff90;
border-radius: 5px;
font-family: 'Segoe UI';
font-size: 20px;
color: white;
cursor: pointer;
text-align: center;
}
#Kati1 {
position: relative;
top: 100px;
left: 20px;
width: 350px;
height: 250px;
border: solid 2px #00ff90;
border-radius: 10px;
}
<div id="Kati1">
<a id="101" class=" RoomStyle" onclick="RoomClick(1,101)">101</a>
<a id="102" class=" RoomStyle" onclick="RoomClick(1,102)">102</a>
<a id="103" class=" RoomStyle" onclick="RoomClick(1,103)">103</a>
<a id="104" class=" RoomStyle" onclick="RoomClick(1,104)">104</a>
<a id="105" class=" RoomStyle" onclick="RoomClick(1,105)">105</a>
<a id="201" class=" RoomStyle" onclick="RoomClick(1,201)">201</a>
<a id="202" class=" RoomStyle" onclick="RoomClick(1,202)">202</a>
<a id="203" class=" RoomStyle" onclick="RoomClick(1,203)">203</a>
<a id="204" class=" RoomStyle" onclick="RoomClick(1,204)">204</a>
<a id="205" class=" RoomStyle" onclick="RoomClick(1,205)">205</a>
<a id="301" class=" RoomStyle" onclick="RoomClick(1,301)">301</a>
<a id="302" class=" RoomStyle" onclick="RoomClick(1,302)">302</a>
<a id="303" class=" RoomStyle" onclick="RoomClick(1,303)">303</a>
<a id="304" class=" RoomStyle" onclick="RoomClick(1,304)">304</a>
<a id="305" class=" RoomStyle" onclick="RoomClick(1,305)">305</a>
</div>
这个片段显示了实际发生的情况。当我想让它只变成绿色然后只改变 1 的颜色时..我该怎么做?
最佳答案
Element.getElementsByTagName()
按标签名称选择元素,而不是按 CSS 样式查询。
您正在寻找Document.querySelectorAll()
相反:
var divEls = document.querySelectorAll("#Kati1 a")
关于Javascript 不会加载代码的特定部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43053066/