使用Javascript根据child号加一个CSSclass(HTML)

Question

为此需要一些帮助。我想用 css 和 js 创建一个动态投资组合 class。根据 div 中 HTLM children 的数量，我似乎无法让我的包装器元素采用额外的 class。如果有 5 children 元素将必须采用 class "wrapper5" 如果有 4 children 它将采用 class "wrapper4" 等等... 这些cssclass只需要加一个grid-template-areas.

希望您有信息可以帮助我找到解决方案。（对不起我的英语）

let port = document.getElementById("wrapper");

if (port.childNodes.length = 4) {
  port.classList.add("wrapper4")
} else if (port.childNodes.length = 3) {
  port.classList.add("wrapper3")
}

body,
html {
  padding: 0;
  margin: 0;
}

.navbar {
  height: 5vh;
}

#wrapper {
  height: 99vh;
  display: grid;
  grid-gap: 4px;
  margin: 5px;
}

#wrapper5 {
  grid-template-areas: "image3 image3 image3 image2 image2 image2 image5 image5" "image4 image4 image4 image4 image4 image4 image5 image5" "image1 image1 image1 image1 image1 image1 image1 image1";
}

#wrapper4 {
  grid-template-areas: "image4 image4 image4 image4 image4 image4 image4 image4" "image3 image3 image3 image3 image2 image2 image2 image2" "image1 image1 image1 image1 image1 image1 image1 image1";
}

#wrapper3 {
  grid-template-areas: "image3 image3 image3 image3 image2 image2 image2 image2" "image1 image1 image1 image1 image1 image1 image1 image1";
}

.flex1 {
  grid-area: image1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4281a4;
  font-size: 3vh;
  font-weight: 800;
  text-align: center;
}

.flex2 {
  grid-area: image2;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E6B89C;
  font-size: 3vh;
  font-weight: 800;
  text-align: center;
}

.flex3 {
  grid-area: image3;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FE938C;
  font-size: 3vh;
  font-weight: 800;
  text-align: center;
}

.flex4 {
  grid-area: image4;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EAD2AC;
  font-size: 3vh;
  font-weight: 800;
  text-align: center;
}

.flex5 {
  grid-area: image5;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #9CAFB7;
  font-size: 3vh;
  font-weight: 800;
  text-align: center;
}

<div class="content">
  <div id="wrapper">
    <div class="flex1">Image 1</div>
    <div class="flex2">Image 2</div>
    <div class="flex3">Image 3</div>
    <div class="flex4">Image 4</div>
    <div class="flex5">Image 5</div>
  </div>
  <div id="wrapper">
    <div class="flex1">Image 1</div>
    <div class="flex2">Image 2</div>
    <div class="flex3">Image 3</div>
    <div class="flex4">Image 4</div>
  </div>
  <div id="wrapper">
    <div class="flex1">Image 1</div>
    <div class="flex2">Image 2</div>
    <div class="flex3">Image 3</div>
  </div>
  <div>

Answer 1

首先，您不能有多个 id。只需使用 id wrapper1、wrapper2 等即可。

<div class="content">
    <div id="wrapper1">
        <div class="flex1">Image 1</div>
        <div class="flex2">Image 2</div>
        <div class="flex3">Image 3</div>
        <div class="flex4">Image 4</div>
        <div class="flex5">Image 5</div>
    </div>
    <div id="wrapper2">
        <div class="flex1">Image 1</div>
        <div class="flex2">Image 2</div>
        <div class="flex3">Image 3</div>
        <div class="flex4">Image 4</div>
    </div>
    <div id="wrapper3">
        <div class="flex1">Image 1</div>
        <div class="flex2">Image 2</div>
        <div class="flex3">Image 3</div>
    </div>
</div>

对于 js，= 是一个赋值运算符而不是相等检查。您可以使用双等号 == 进行相等性检查。

let port = document.querySelectorAll("#wrapper1, #wrapper2, #wrapper3");

port.forEach((el) => {
    if (el.childNodes.length == 4) {
        el.classList.add("image-4");
    }
      else if (el.childNodes.length == 3) {
          el.classList.add("image-3");
      }
});

Answer 2

您的代码存在几个问题：

您不能访问多个 id，它们应该是唯一的。最好使用 class.
childNodes 将计算元素内的所有项目，包括文本，导致比预期更大的数字。请改用 children。根据 MDN：“childNodes 包括所有子节点——包括非元素节点，如文本和注释节点”。
您正在使用 =（赋值）而不是 ===（比较）。您可以使用 == 或 ===，但使用严格相等运算符 === 被认为是最佳实践

let wrappers = document.querySelectorAll(".wrapper");

for(let i = 0; i < wrappers.length; i++){
  if (wrappers[i].children.length === 4) {
      wrappers[i].classList.add("wrapper4")
  } else if (wrappers[i].children.length === 3) {
    wrappers[i].classList.add("wrapper3")
  }
  
}

<div class="content">
      <div class="wrapper">
          <div class="flex1">Image 1</div>
          <div class="flex2">Image 2</div>
          <div class="flex3">Image 3</div>
          <div class="flex4">Image 4</div>
          <div class="flex5">Image 5</div>
      </div>
      <div class="wrapper">
        <div class="flex1">Image 1</div>
        <div class="flex2">Image 2</div>
        <div class="flex3">Image 3</div>
        <div class="flex4">Image 4</div>
    </div>
    <div class="wrapper">
      <div class="flex1">Image 1</div>
      <div class="flex2">Image 2</div>
      <div class="flex3">Image 3</div>
    </div>
</div>

Answer 3

如果您将 ID 更改为 classes，您可以获得一个真正动态的解决方案 - 它不仅适用于加载，而且适用于添加或移除图像，例如在运行.

时由用户操作

我们寻找所有带有 class 包装器的元素，并去掉它们可能已经拥有的任何包装器 class 并添加一个名为 class 的包装器 + 他们拥有的子级数量。无需条件语句。

<head>
<style>
body,
html {
  padding: 0;
  margin: 0;
}

.navbar {
  height: 5vh;
}

.wrapper {
  height: 99vh;
  display: grid;
  grid-gap: 4px;
  margin: 5px;
}

.wrapper5 {
  grid-template-areas: "image3 image3 image3 image2 image2 image2 image5 image5" "image4 image4 image4 image4 image4 image4 image5 image5" "image1 image1 image1 image1 image1 image1 image1 image1";
}

.wrapper4 {
  grid-template-areas: "image4 image4 image4 image4 image4 image4 image4 image4" "image3 image3 image3 image3 image2 image2 image2 image2" "image1 image1 image1 image1 image1 image1 image1 image1";
}

.wrapper3 {
  grid-template-areas: "image3 image3 image3 image3 image2 image2 image2 image2" "image1 image1 image1 image1 image1 image1 image1 image1";
}

.flex1 {
  grid-area: image1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4281a4;
  font-size: 3vh;
  font-weight: 800;
  text-align: center;
}

.flex2 {
  grid-area: image2;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E6B89C;
  font-size: 3vh;
  font-weight: 800;
  text-align: center;
}

.flex3 {
  grid-area: image3;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FE938C;
  font-size: 3vh;
  font-weight: 800;
  text-align: center;
}

.flex4 {
  grid-area: image4;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EAD2AC;
  font-size: 3vh;
  font-weight: 800;
  text-align: center;
}

.flex5 {
  grid-area: image5;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #9CAFB7;
  font-size: 3vh;
  font-weight: 800;
  text-align: center;
}
</style>
</head>
<body>
<div class="content">
  <div class="wrapper">
    <div class="flex1">Image 1</div>
    <div class="flex2">Image 2</div>
    <div class="flex3">Image 3</div>
    <div class="flex4">Image 4</div>
    <div class="flex5">Image 5</div>
  </div>
  <div class="wrapper">
    <div class="flex1">Image 1</div>
    <div class="flex2">Image 2</div>
    <div class="flex3">Image 3</div>
    <div class="flex4">Image 4</div>
  </div>
  <div class="wrapper">
    <div class="flex1">Image 1</div>
    <div class="flex2">Image 2</div>
    <div class="flex3">Image 3</div>
  </div>
  <div>
<script>

function updateWrappers() {
  let ports = document.querySelectorAll(".wrapper");
  for (let i = 0; i < ports.length; i++) {
    let port = ports[i];
    port.classList = 'wrapper';
    port.classList.add('wrapper' + port.children.length);
  }
}

updateWrappers();
// for a truly dynamic situation add a mutationObserver which runs updateWrappers if anything added/subtracted
</script>
</body>

Answer 4

如果您将 ID 更改为 classes，您可以获得一个真正动态的解决方案 - 它不仅适用于加载，而且适用于添加或移除图像，例如在运行.

期间由用户操作

我们寻找所有带有 class 包装器的元素，并删除它们可能已经拥有的任何包装器 class 并添加一个名为 wrapper 的 class + 它们拥有的子级数量。不需要条件语句。

<head>
<style>
body,
html {
  padding: 0;
  margin: 0;
}

.navbar {
  height: 5vh;
}

.wrapper {
  height: 99vh;
  display: grid;
  grid-gap: 4px;
  margin: 5px;
}

.wrapper5 {
  grid-template-areas: "image3 image3 image3 image2 image2 image2 image5 image5" "image4 image4 image4 image4 image4 image4 image5 image5" "image1 image1 image1 image1 image1 image1 image1 image1";
}

.wrapper4 {
  grid-template-areas: "image4 image4 image4 image4 image4 image4 image4 image4" "image3 image3 image3 image3 image2 image2 image2 image2" "image1 image1 image1 image1 image1 image1 image1 image1";
}

.wrapper3 {
  grid-template-areas: "image3 image3 image3 image3 image2 image2 image2 image2" "image1 image1 image1 image1 image1 image1 image1 image1";
}

.flex1 {
  grid-area: image1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4281a4;
  font-size: 3vh;
  font-weight: 800;
  text-align: center;
}

.flex2 {
  grid-area: image2;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E6B89C;
  font-size: 3vh;
  font-weight: 800;
  text-align: center;
}

.flex3 {
  grid-area: image3;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FE938C;
  font-size: 3vh;
  font-weight: 800;
  text-align: center;
}

.flex4 {
  grid-area: image4;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EAD2AC;
  font-size: 3vh;
  font-weight: 800;
  text-align: center;
}

.flex5 {
  grid-area: image5;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #9CAFB7;
  font-size: 3vh;
  font-weight: 800;
  text-align: center;
}
</style>
</head>
<body>
<div class="content">
  <div class="wrapper">
    <div class="flex1">Image 1</div>
    <div class="flex2">Image 2</div>
    <div class="flex3">Image 3</div>
    <div class="flex4">Image 4</div>
    <div class="flex5">Image 5</div>
  </div>
  <div class="wrapper">
    <div class="flex1">Image 1</div>
    <div class="flex2">Image 2</div>
    <div class="flex3">Image 3</div>
    <div class="flex4">Image 4</div>
  </div>
  <div class="wrapper">
    <div class="flex1">Image 1</div>
    <div class="flex2">Image 2</div>
    <div class="flex3">Image 3</div>
  </div>
  <div>
<script>

function updateWrappers() {
  let ports = document.querySelectorAll(".wrapper");
  for (let i = 0; i < ports.length; i++) {
    let port = ports[i];
    port.classList = 'wrapper';
    port.classList.add('wrapper' + port.children.length);
  }
}

updateWrappers();
// for a truly dynamic situation add a mutationObserver which runs updateWrappers if anything added/subtracted
</script>
</body>

Answer 5

ids 不能应用超过一个元素，这是类和 ids.

的主要区别

使用Javascript根据child号加一个CSSclass(HTML)

Use Javascript to add a CSS class according of child number (HTML)

javascript

css

grid