javascript - JS : 2 arrays, 内部HTML

Question

我拥有 2 个数组。第一个数组是 HTML 元素。第二个数组是一些字符串。

我想将第二个数组(字符串)的每个值指定为第一个数组(HTML 元素)中每个项目的innerHTML。

我这里有一个非常不干的解决方案:This is the Fiddle (我的大部分聪明尝试已被删除)。

const second = document.querySelector(".second .blobtext");
const third = document.querySelector(".third .blobtext");
const fourth = document.querySelector(".fourth .blobtext");

const blobs = [second, third, fourth];

const blobAssign = [
  "ur a blob",
  "ur both blobs",
  "no ur a blob",
];

second.innerHTML = blobAssign[0];
third.innerHTML = blobAssign[1];
fourth.innerHTML = blobAssign[2];

//blobs.map( (eachBlob) => {
  // eachBlob.innerHTML = blobAssign;
//})

//blobs.map((eachBlob) => {eachBlob.innerHTML = //blobAssign.forEach((eachAssign) => {
     // ??? 
//  })
//})

#arcs {
  /* border: 1px solid red; */
}

.blobtext {
  text-align: center;
  position: relative;
  width: 12vw;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: sans-serif;
  max-width: 9vw !important;
}

.second {
  width: 10vw;
  height: 10vw;
  border: 1px solid red;
  border-radius: 100%;
  position: absolute;
  left: 0%;
  top: 0%;
  transform: translate3d(0%, 0, 0);
  background: red;
  .blobtext {
    font-size: 1vw;
  }
}

.third {
  width: 10vw;
  height: 10vw;
  border-radius: 100%;
  position: relative;
  left: 60%;
  top: 0%;
  transform: translate3d(-60%, 0%, 0);
  background: orange;
  .blobtext {
    font-size: 1vw;
    color: #fff;
    text-align: center
  }
}

.fourth {
  width: 10vw;
  height: 10vw;
  border-radius: 100%;
  position: absolute;
  left: 40%;
  top: 0%;
  transform: translate3d(-40%, 0%, 0);
  background: green;
  .blobtext {
    font-size: 0.8vw;
    color: #fff;
    text-align: center;
  }
}

<div id="arcs">
  <div class="big-arc">
    <div class="second">
      <p class="blobtext">[first blob text]</p>
    </div>
    <div class="third">
      <p class="blobtext">[second blob text]</p>
    </div>
    <div class="fourth">
      <p class="blobtext">[third blob text]</p>
    </div>
  </div>
</div>

我想也许，我需要使用 .map，并执行以下操作:blobs.map((eachBlob) => {eachBlob.innerHTML = blobAssign;}) - 但我不是当然，因为这会将整个第二个数组映射到eachBlob。但是，我不知道如何让它成为 1 比 1。我是这样分配的: blobs.map((eachBlob) => {eachBlob.innerHTML = blobAssign.forEach((eachAssign) => { eachAssign.somethingHappensHere }) })

尝试学习这种函数式编程。也许我不需要 .map，这里 - 也许 .forEach - 我觉得我只是不知道我应该使用什么。

处理这样的事情多年来一直是我在网络开发中的致命弱点。这看起来也很简单，但我的大脑一直在拒绝。我觉得我要么错过了一些非常基本的东西，要么我试图做到这一点的方式从根本上是错误的。

任何帮助都将超出 EXCLLNT!

Answer 1

这是你的html和js供大家引用

<div id="arcs">
  <div class="big-arc">
    <div class="second">
      <p class="blobtext">[first blob text]</p>
    </div>
    <div class="third">
      <p class="blobtext">[second blob text]</p>
    </div>
    <div class="fourth">
      <p class="blobtext">[third blob text]</p>
    </div>
  </div>
</div>

js:

const second = document.querySelector(".second .blobtext");
const third = document.querySelector(".third .blobtext");
const fourth = document.querySelector(".fourth .blobtext");

const blobs = [second, third, fourth];

const blobAssign = [
  "ur a blob",
  "ur both blobs",
  "no ur a blob",
];

second.innerHTML = blobAssign[0];
third.innerHTML = blobAssign[1];
fourth.innerHTML = blobAssign[2];

您需要做什么:blobs.forEach((el, index) => el.innerHTML = blobAssign[index])

在jsfiddle中:https://jsfiddle.net/L5Lhcvp0/1/