Question

我正在尝试使用点击处理程序动态添加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/

Answer 1

问题不是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;'

示例：

＆＃13;

(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';
  }

})();

＆＃13;

.circles {
  position: absolute;
}

.subCircle {
  position: absolute;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  border: 2px solid black;
  top: 50%;
  left: 50%;
}

＆＃13;

<body>
  <div class="circles" quantity=10></div>
</body>

＆＃13;

Answer 2

只需为每个圆圈添加z-index属性

subCircle[i].style['z-index'] = subCircle.length-i;

实际上，较大的圆圈与所有内圈重叠。

在点击处理程序中使用重叠的“circle”div获取错误的元素

2 个答案: