javascript - 如何为每个 block 设置一个事件类？ [Javascript]

Question

我有一个 Bootstrap 布局:一个容器、一行、几个“block-div”和每个 block-div 的三个 div。 block-div 的数量由脚本动态创建(用户选择将在页面上显示多少 block )，但每个 block 包含三个 div。

当用户点击一个 div 时，一个事件类被添加到它。 我的问题是我的代码将在整个页面中只设置一个事件类，但我想为每个 block 设置一个事件类。

如何在不使用任何 JS 框架(仅纯 JavaScript)的情况下实现这一点？

我给你留下了我的布局示例:https://jsfiddle.net/9vr92ss4/

var myCol = document.getElementsByClassName('myCol');

function getTarget(e) {
  if (!e) {
    e = window.event;
  }
  return e.target || e.srcElement;
}

function setActive(e) {
  var target = getTarget(e);
  for (i = 0; i < myCol.length; i++) {
  	myCol[i].className = 'col-xs-4 myCol';
  }
  
  target.className = 'col-xs-4 myCol active';
}

for (j = 0; j < myCol.length; j++) {
  myCol[j].addEventListener('click', function(e) {
    setActive(e);
  }, false);
}

/* Latest compiled and minified CSS included as External Resource*/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet');

body {
    margin: 10px;
}

.myCol {
  padding: 40px 0;
  border: 1px solid #F44336;
  cursor: pointer;
  margin: 30px 0;
}

.active {
  background: #9C27B0;
  border: 1px solid #9C27B0;
  color:#fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
  <div class="row">
  
    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-1</div>
      <div class="col-xs-4 myCol">b-1</div>
      <div class="col-xs-4 myCol">c-1</div>
    </div>
    
    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-2</div>
      <div class="col-xs-4 myCol">b-2</div>
      <div class="col-xs-4 myCol">c-2</div>
    </div>
    
    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-3</div>
      <div class="col-xs-4 myCol">b-3</div>
      <div class="col-xs-4 myCol">c-3</div>
    </div>
    
  </div>
</div>

Answer 1

你正在主动重置类名:

for (i = 0; i < myCol.length; i++) {
  myCol[i].className = 'col-xs-4 myCol';
}

需要检查myCol的父节点是否与target的父节点相同:

function setActive(e) {
  var target = getTarget(e),
      section = target.parentNode;

  for (i = 0; i < myCol.length; i++) {
    if (myCol[i].parentNode === section) {
      myCol[i].className = 'col-xs-4 myCol';
    }
  }

  target.className = 'col-xs-4 myCol active';
}

查看更新后的工作代码段:

var myCol = document.getElementsByClassName('myCol');

function getTarget(e) {
  if (!e) {
    e = window.event;
  }
  return e.target || e.srcElement;
}

function setActive(e) {
	var target = getTarget(e),
      section = target.parentNode;
  
  for (i = 0; i < myCol.length; i++) {
    if (myCol[i].parentNode === section) {
      myCol[i].className = 'col-xs-4 myCol';
    }
  }
  
  target.className = 'col-xs-4 myCol active';
}

for (j = 0; j < myCol.length; j++) {
  myCol[j].addEventListener('click', function(e) {
    setActive(e);
  }, false);
}

/* Latest compiled and minified CSS included as External Resource*/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet');

body {
    margin: 10px;
}

.myCol {
  padding: 40px 0;
  border: 1px solid #F44336;
  cursor: pointer;
  margin: 30px 0;
}

.active {
  background: #9C27B0;
  border: 1px solid #9C27B0;
  color:#fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
  <div class="row">
  
    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-1</div>
      <div class="col-xs-4 myCol">b-1</div>
      <div class="col-xs-4 myCol">c-1</div>
    </div>
    
    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-2</div>
      <div class="col-xs-4 myCol">b-2</div>
      <div class="col-xs-4 myCol">c-2</div>
    </div>
    
    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-3</div>
      <div class="col-xs-4 myCol">b-3</div>
      <div class="col-xs-4 myCol">c-3</div>
    </div>
    
  </div>
</div>