Question

在我看来，我有2个阵列。第一个数组是HTML元素。第二个数组是一些字符串。

我想将第二个数组（字符串）的每个值分配给第一个数组中每个项目的innerHTML（这是HTML元素）。

我在这里有一个非常干的解决方案：This is the Fiddle （我的大部分聪明尝试都被删除了。）

＆＃13;

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) => {
     // ??? 
//  })
//})

＆＃13;

#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;
  }
}

＆＃13;

<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>

＆＃13;

我想也许，我需要使用.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/

Answer 2

你可以从@AhmedMusallam的答案中走出更远的一步并摆脱

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

const blobs = [second, third, fourth];

并将其包含在循环中：

＆＃13;

const blobAssign = [
  "ur a blob",
  "ur both blobs",
  "no ur a blob",
];

[
  ".second .blobtext",
  ".third .blobtext",
  ".fourth .blobtext"
].forEach((selector, index) => {
  let node = document.querySelector(selector);
  if (node) node.innerHTML = blobAssign[index];
})

＆＃13;

<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>

＆＃13;

Answer 3

我有2个数组。第一个数组是HTML元素。第二个数组是一些字符串。我想 将第二个数组（字符串）的每个值分配给第一个数组中每个项目的innerHTML （这是HTML元素）。

responseJSON

JS：2个数组，innerHTML

3 个答案: