我通过以下方式选择了特定课程.querySelectorAll:
var hit3 = document.querySelectorAll(".lattern.hit-3 .circle");
我现在正在尝试瞄准并调整.style.visibility通过执行以下操作来设置此元素的属性：
hit3.style.visibility = "visible";
但这会导致错误：
Uncaught TypeError: Cannot set property 'visibility' of undefined
如何定位特定目标.style与上述.querySelectorAll选择器？
Fiddle
querySelectorAll返回一个类似结构体（NodeList）的数组，它没有style属性。
但我认为您需要的略有不同，我假设想要显示单击元素的圆圈
var latternElement = document.querySelectorAll('.lattern');
function toggleElement(el) {
el.querySelector('.circle').classList.add('visible'); //also minor tweaks, use css rules
}
for (var i = 0; i < latternElement.length; i++) {
latternElement[i].addEventListener('click', function(event) {
if (this.classList.contains("hit-3")) { //minor tweaks - only supported in modern browsers
toggleElement(this);
}
});
}
.lattern {
position: relative;
width: 100px;
height: 50px;
background-color: red;
margin: 0 0 10px 0;
cursor: pointer;
}
.circle {
position: relative;
top: 20px;
left: 20px;
border-radius: 50% 50%;
width: 16px;
height: 16px;
background-color: green;
visibility: hidden;
}
.circle.default,
.circle.visible {
visibility: visible;
}
<div class="lattern hit-1">
<div class="circle"></div>
</div>
<div class="lattern hit-2">
<div class="circle default"></div>
</div>
<div class="lattern hit-3">
<div class="circle"></div>
click me
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
