时间戳

首页 > 解决方案 > 我从 class.length 得到错误的长度

javascript - 我从 class.length 得到错误的长度

问题描述

我试图让 div 根据类中元素的数量出现，但是相反，我得到了构造函数中的参数数量。div 的创建已经在工作，但我只是没有得到正确数量的 div。

有谁知道如何获取班级中项目的长度，在这种情况下，我需要它是 4 个项目。

let toggleButton = document.getElementById('toggle-button-id')
let toggleStateSquare = false;

class Block {
  constructor(title, description) {
    this.title = title;
    this.description = description;
  }
}

var block1 = new Block('lieke', 'lorem ipsum dolor nogwattes');
var block2 = new Block('testjete', 'ldjfaoef aheoahf aflheaofhia afhoeahfoa ef aohfhoa');
var block3 = new Block('testte', 'ldjfaoef aheoahf aflheaofhia afhoeahfoa ef aohfhoa');
var block4 = new Block('rqed', 'lorem ipsum dofafdaffelor nogwattes');

console.log(Block.length)

createElements()
let elementsArray = document.querySelectorAll('.element')
setElementHeight()


function setElementHeight() {
  elementHeight = document.getElementsByClassName("element")[0].clientWidth + 'px';
  for (var i = 0; i < elementsArray.length; i++) {
    elementsArray[i].style.height = elementHeight;
  }
}

function createElements() {
  for (var i = 0; i < Block.length; i++) {
    console.log('test', i)
    var block = document.createElement('div');
    block.setAttribute('class', 'element');
    block.setAttribute('id', `elementid${i+1}`);
    document.getElementById('grid-container-id').appendChild(block);
    console.log('block aangemaakt')
  }
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
}

.grid-container {
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* grid-auto-rows:220px; */
  grid-gap: 40px;
}

.element {
  background: #4287f5;
  /* grid-column: span 2; */
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

h2 {
  color: white;
}

p {
  color: white;
}

.toggle-button-class {
  position: fixed;
  bottom: 20px;
  right: 20px;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.25);
  font-size: 30px;
  cursor: pointer;
}

@media only screen and (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (min-width: 1000px) {
  .grid-container {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link href="style.css" rel="stylesheet">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- import fontawesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div id='grid-container-id' class="grid-container">

  </div>
  <div class='toggle-button-class' id='toggle-button-id'><i class="fa fa-th-large"></i></div>
  <script src="main.js"></script>
</body>

</html>

标签： javascripthtmlloopsclassfor-loop

解决方案

推荐阅读