为什么“调整大小”事件不能用于我的函数来检测高度？

Question

我有一个带有divs的表，我希望每一行都能得到最大的单元格高度。我已经写了一个函数来得到它。在第一次加载时，函数正常工作，但是当调整窗口大小时，函数不能工作。你能告诉我有什么问题吗？

​

const setHeight = function() {
  let hieghts = []
  let classes = 1
  let rowNum = document.querySelector("#desc").childElementCount
  for (classes; classes < rowNum; classes++) {
    document.querySelectorAll(`.content${classes}`).forEach(td => {
      hieghts.push(td.clientHeight)
    })
    let max = Math.max(...hieghts)
    document.querySelectorAll(`.content${classes}`).forEach(td => {
      td.style.height = `${max}px`
    })
    max = 0
    hieghts = []
  }
}
window.addEventListener("resize", setHeight) // why this line not working?
setHeight();

.table {
  display: grid;
  grid-template-columns: repeat(6, auto);
  height: 90vh;
  border: 1px solid red;
}

.col {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid;
}

.cells {
  display: block;
  width: 100%;
  border-bottom: 1px solid;
  padding: 5px;
  box-sizing: border-box;
}

<div class="table">
  <div class="col">
    <span class="cells title">code title 1</span>
    <span class="cells content1">dev-1</span>
    <span class="cells content2">dev-2</span>
    <span class="cells content3">dev-3</span>
  </div>
  <div class="col">
    <span class="cells title">code </span>
    <span class="cells content1">1</span>
    <span class="cells content2">2</span>
    <span class="cells content3">3</span>
  </div>
  <div id="desc" class="col">
    <span class="cells content title">description</span>
    <span class="cells content1">Lorem ipsum dolor sit  </span>
    <span class="cells content2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis incidunt inventore  </span>
    <span class="cells content3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis incidunt inventore  </span>
  </div>
  <div class="col">
    <span class="cells title">num</span>
    <span class="cells content1">1</span>
    <span class="cells content2">1</span>
    <span class="cells content3">1</span>
  </div>
  <div class="col">
    <span class="cells title">prise</span>
    <span class="cells content1">100</span>
    <span class="cells content2">200</span>
    <span class="cells content3">300</span>
  </div>
  <div class="col">
    <span class="cells title">total </span>
    <span class="cells content1">1000</span>
    <span class="cells content2">20000</span>
    <span class="cells content3">15000</span>
  </div>
</div>

​

Answer 1

首先，使用一个表将更容易地控制行的高度，但我会给出您所要求的。JavaScript的主要问题是，您从未清除行上的样式，因此一旦inital函数运行，它们将始终是相同的。为了达到你想要的目的。

1. Select
2. 创建一个变量，用于在单元格上存储最大的单元格
3. 循环，并首先清除它们的内联样式
4. ，运行条件以查看当前单元格是否大于最大单元格变量。如果将该高度存储为新的biggestCell值。
5. ，一旦所有单元格再次被选中，并将高度设置为biggestCell值。
6. I还添加了一个简短的退出函数(2秒)，以防止您的函数每秒钟运行一次，窗口正在调整大小。

​

function debounce(func, timeout = 200){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

const checkHeight = function() {
  console.log("resize running...")
  const cells = document.querySelectorAll(".cells");
  let biggestCell = 0;
  for (let index = 0; index < cells.length; index++) {
    const cell = cells[index];
    cell.style.height = "";
    if (cell.getBoundingClientRect().height > biggestCell) {
      biggestCell = cell.getBoundingClientRect().height;
    }
  }
  for (let index = 0; index < cells.length; index++) {
    const cell = cells[index];
    cell.style.height = biggestCell + "px";
  }
}
window.addEventListener("resize", debounce(() => checkHeight()));
checkHeight();

.table {
  display: grid;
  grid-template-columns: repeat(6, auto);
  height: 90vh;
  border: 1px solid red;
}

.col {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid;
}

.cells {
  display: block;
  width: 100%;
  border-bottom: 1px solid;
  padding: 5px;
  box-sizing: border-box;
}

<div class="table">
  <div class="col">
    <span class="cells title">code title 1</span>
    <span class="cells content1">dev-1</span>
    <span class="cells content2">dev-2</span>
    <span class="cells content3">dev-3</span>
  </div>
  <div class="col">
    <span class="cells title">code </span>
    <span class="cells content1">1</span>
    <span class="cells content2">2</span>
    <span class="cells content3">3</span>
  </div>
  <div id="desc" class="col">
    <span class="cells content title">description</span>
    <span class="cells content1">Lorem ipsum dolor sit  </span>
    <span class="cells content2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis incidunt inventore  </span>
    <span class="cells content3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis incidunt inventore  </span>
  </div>
  <div class="col">
    <span class="cells title">num</span>
    <span class="cells content1">1</span>
    <span class="cells content2">1</span>
    <span class="cells content3">1</span>
  </div>
  <div class="col">
    <span class="cells title">prise</span>
    <span class="cells content1">100</span>
    <span class="cells content2">200</span>
    <span class="cells content3">300</span>
  </div>
  <div class="col">
    <span class="cells title">total </span>
    <span class="cells content1">1000</span>
    <span class="cells content2">20000</span>
    <span class="cells content3">15000</span>
  </div>
</div>

​

Answer 2

问题是，您在单个for循环中计算max值，并尝试在同一个循环中设置表中的行高。在这种情况下，行高保持其当前状态。如果在旧方法中将max值打印到控制台，则会看到此逻辑错误；表中所有行的高度都打印到控制台，而不是最大值。

​

let rowNum = document.querySelector("#desc").childElementCount;

const setHeight = function() {
    let heights = [];

    /* All row heights are placed in the array. */
    for(let index = 1 ; index < rowNum ; ++index)
    {
        document.querySelectorAll(`.content${index}`).forEach(td => {
            heights.push(td.clientHeight)
        });
    }
    
    /* Maximum row height is learned. */
    let max = Math.max(...heights);
    console.log(max);
    
    /* The maximum row height is assigned to all rows in the table. */    
    for(let index = 1 ; index < rowNum ; ++index)
    {
        document.querySelectorAll(`.content${index}`).forEach(td => {
            td.style.height = `${max}px`
        });
    }
}

window.addEventListener("resize", setHeight);
setHeight();

.table {
  display: grid;
  grid-template-columns: repeat(6, auto);
  height: 90vh;
  border: 1px solid red;
}
.col {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid;
}
.cells {
  display: block;
  width: 100%;
  border-bottom: 1px solid;
  padding: 5px;
  box-sizing: border-box;
}

<div class="table">
  <div class="col">
    <span class="cells title">code title 1</span>
    <span class="cells content1">dev-1</span>
    <span class="cells content2">dev-2</span>
    <span class="cells content3">dev-3</span>
  </div>
  <div class="col">
    <span class="cells title">code </span>
    <span class="cells content1">1</span>
    <span class="cells content2">2</span>
    <span class="cells content3">3</span>
  </div>
  <div id="desc" class="col">
    <span class="cells content title">description</span>
    <span class="cells content1">Lorem ipsum dolor sit  </span>
    <span class="cells content2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis incidunt inventore  </span>
    <span class="cells content3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis incidunt inventore  </span>
  </div>
  <div class="col">
    <span class="cells title">num</span>
    <span class="cells content1">1</span>
    <span class="cells content2">1</span>
    <span class="cells content3">1</span>
  </div>
  <div class="col">
    <span class="cells title">prise</span>
    <span class="cells content1">100</span>
    <span class="cells content2">200</span>
    <span class="cells content3">300</span>
  </div>
  <div class="col">
    <span class="cells title">total </span>
    <span class="cells content1">1000</span>
    <span class="cells content2">20000</span>
    <span class="cells content3">15000</span>
  </div>
</div>

​