我正在尝试使用点击处理程序动态添加 HTML 元素。当单击处理程序被激活时，它定位错误的元素(它总是定位外圈)。问题出在哪里？
(function() {
//selector, jQuery style
var $ = function(selector) {
return document.querySelector(selector);
}
//getting quantity of circles
var quantity = $('.circles').getAttribute('quantity');
//setting outer width/height for circles
$('.circles').style.width = (quantity * 50) + 4 + 'px';
$('.circles').style.height = (quantity * 50) + 4 + 'px';
//creating element for children
var childCircle = document.createElement('div');
childCircle.className = 'subCircle';
//click function for children
function onClick() {
this.attributes.style.value += 'border-color: red;'
alert(this.clientHeight);
}
//append sub circles
for (var i = 0; i < quantity; i++) {
$('.circles').appendChild(childCircle.cloneNode());
}
//iterate over .circles .subCircle and add onClick function for each subCircle and css aswell
var subCircle = $('.circles').getElementsByClassName('subCircle');
for (var i = 0; i < subCircle.length; i++) {
subCircle[i].onclick = onClick;
subCircle[i].style.width = ((i + 1) * 50) + 'px';
subCircle[i].style.height = ((i + 1) * 50) + 'px';
}
})();.circles {
position: absolute;
}
.subCircle {
position: absolute;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
border: 2px solid black;
top: 50%;
left: 50%;
}<body>
<div class="circles" quantity=10></div>
</body>同样在 jsFiddle 上:https://jsfiddle.net/martin_borman/1srkL5bf/
最佳答案
问题不在于this，它实际上是由事件回调机制设置的。就是你最大的圈子在上面。
更改设置大小的循环可让您将较小的圆圈放在顶部:
for (var i = 0; i < subCircle.length; i++) {
subCircle[i].onclick = onClick;
subCircle[i].style.width = ((subCircle.length - i) * 50) + 'px';
subCircle[i].style.height = ((subCircle.length - i) * 50) + 'px';
}
这里的关键位是 (subCircle.length - i) * 50 而不是 (i + 1) * 50。
我也会用
this.style.borderColor = 'red';
而不是
this.attributes.style.value += 'border-color: red;'
例子:
(function() {
//selector, jQuery style
var $ = function(selector) {
return document.querySelector(selector);
}
//getting quantity of circles
var quantity = $('.circles').getAttribute('quantity');
//setting outer width/height for circles
$('.circles').style.width = (quantity * 50) + 4 + 'px';
$('.circles').style.height = (quantity * 50) + 4 + 'px';
//creating element for children
var childCircle = document.createElement('div');
childCircle.className = 'subCircle';
//click function for children
function onClick() {
this.style.borderColor = 'red';
alert(this.clientHeight);
}
//append sub circles
for (var i = 0; i < quantity; i++) {
$('.circles').appendChild(childCircle.cloneNode());
}
//iterate over .circles .subCircle and add onClick function for each subCircle and css aswell
var subCircle = $('.circles').getElementsByClassName('subCircle');
for (var i = 0; i < subCircle.length; i++) {
subCircle[i].onclick = onClick;
subCircle[i].style.width = ((subCircle.length - i) * 50) + 'px';
subCircle[i].style.height = ((subCircle.length - i) * 50) + 'px';
}
})();.circles {
position: absolute;
}
.subCircle {
position: absolute;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
border: 2px solid black;
top: 50%;
left: 50%;
}<body>
<div class="circles" quantity=10></div>
</body>关于javascript - 在具有重叠 "circle"div 的点击处理程序中获取错误元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38040961/