美文网首页
原生 JS 实现隐藏显示

原生 JS 实现隐藏显示

作者: 饥人谷_曾涛 | 来源:发表于2016-08-18 17:37 被阅读247次

此 demo 主要是用来复习 JS 数组的方法

前端新手一枚,代码肯定有不足,欢迎大家将意见和问题提出

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="container">
      <button class="btn btn-info">隐藏</button>
      <button class="btn btn-danger">显示</button>
      <div class="wrapper">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
      </div>
    </div>
  </body>
</html>

CSS

.wrapper .item {
  float: left;
  width: 100px;
  min-height: 100px;
  line-height: 100px;
  border: 1px solid #000;
  margin-top: 10px;
  margin-right: 10px;
  text-align: center;
}

.wrapper .style {
  border-color: red;
}

.wrapper .hide {
  display: none;
}

JS

var wrapper = document.querySelector('.wrapper'),
    hide = document.querySelector('.btn-info'),
    show = document.querySelector('.btn-danger');

function addClass(elem, classes) {
  var className = elem.className;
  elem.className = elem.className + ' ' + classes;
}

function removeClass(elem, classes) {
  var classArr = elem.className.split(' '),
      index = 0;
  for (var i = 0, len = classArr.length; i < len; i++) {
    if (classArr[i] === classes) {
      index = i;
    }
  }
  elem.className = classArr.slice(0, index).join(' ');
}

wrapper.addEventListener('click', function(e){
  if (e.target.className.indexOf('style') === -1) {
    addClass(e.target, 'style');
  } else {
    removeClass(e.target, 'style');
  }
}, false);

hide.addEventListener('click', function(e){
 var elemArr = document.querySelectorAll('.item');
  for (var i = 0; i < elemArr.length; i++) {
    if (elemArr[i].className.indexOf('style') !== -1) {
      var current = elemArr[i];
      addClass(current, 'hide');
    }
  }
}, false);

show.addEventListener('click', function(e){
  var elemArr = document.querySelectorAll('.item');
  for (var i = 0; i < elemArr.length; i++) {
    if (elemArr[i].className.indexOf('hide') !== -1) {
      var current = elemArr[i];
      removeClass(current, 'hide')
    }
  }
}, false);

查看在线效果

相关文章

网友评论

      本文标题:原生 JS 实现隐藏显示

      本文链接:https://www.haomeiwen.com/subject/otwvsttx.html