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

【问题标题】：How to set one active class for every block? [Javascript]如何为每个块设置一个活动类？ [Javascript]
【发布时间】：2017-02-22 20:08:34
【问题描述】：

我有一个引导布局：一个容器、一行、几个“块 div”和每个块 div 的三个 div。 block-div 的数量由脚本动态创建（用户选择页面上显示多少块），但每个块包含三个 div。

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

如何在不使用任何 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>

【问题讨论】：

那么您是想一键在多个块上设置一个活动类，还是每次单击都可以设置类而不会被删除？
jQuery 是 Bootstrap 的硬依赖。你会用jQuery吗？
@DeividasKaržinauskas 我想在第一个块上设置一个具有活动类的 div，在第二个块上设置一个具有活动类的 div，依此类推。每个块只有一个具有活动类的 div。如果一个块已经有一个带有活动类的 div，并且我单击另一个 div，则单击的新 div 将具有活动类，而旧的将丢失它。
@LiXinyang 我需要纯JS，其实我用bootstrap只是为了尝试，我是JS新手，还没有开始学习jquery。

标签： javascript html css twitter-bootstrap function

【解决方案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';
}

查看这个更新的工作 sn-p：

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>

【讨论】：

我相信他只想为每个块标记一个元素。
嗯，你可能是对的。问题不是很清楚
更新了我的问题和小提琴，使其工作“单选按钮样式”。 ;)
@Connum 这正是我想要实现的。非常感谢，原来如此简单。现在我需要了解它是如何以及为什么起作用的啊。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

您可以通过一次思考一排来简化问题。

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

【讨论】：