Question

我有一个Bootstrap布局：一个容器，一行，几个＆＃34; block-divs＆＃34;每个块div都有三个div。 block-div的数量由脚本动态创建（用户选择将在页面上显示多少个块），但每个块包含三个div。

当用户点击div时，会向其添加一个活动类。我的问题是我的代码只会在整个页面中设置一个活动类，但我想为每个块设置一个活动类。

如何在不使用任何JS框架（仅限纯JavaScript）的情况下实现这一目标？

我给你留下一个布局示例：https://jsfiddle.net/9vr92ss4/

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

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

请参阅此更新的工作代码段：

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 2

这是一个很多更简单的解决方案，但使用 jQuery 。

＆＃13;

$('.myCol').click(function() {
  $(this).parent().find('.myCol').removeClass('active');
  $(this).toggleClass('active');
})

＆＃13;

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;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<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>

＆＃13;

Answer 3

您可以通过考虑一行来简化问题。

你做得很好。您唯一需要的是一个存储网格状态的数据结构。

如何为每个块设置一个活动类？ [使用Javascript]

3 个答案: