Question

我有一个关于电影的项目，并且要移动此html元素并更改其中的一些内容。我要更改的内容是图像，等级，电影名称和年份。这些是我要更改的内容

<img src="img/mov-1.jpg" alt="mov-1" class="figure__movie"> <p>7.7/10</p> <h3>Ready Player one</h3> <p>2018</p>

我的html内容如下

<figure class="figure figure--1">
      <img src="img/mov-1.jpg" alt="mov-1" class="figure__movie">
      <p>7.7/10</p>
      <svg class="figure__icon--1">
        <use xlink:href="img/sprite.svg#icon-heart"></use>
      </svg>
      <svg class="figure__icon--2">
        <use xlink:href="img/sprite.svg#icon-eye"></use>
      </svg>

      <div class="figure__star">
        <svg class="figure__star--1">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--2">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--3">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--4">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--5">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
      </div>

      <figcaption class="figure__caption">
            <h3>Ready Player one</h3>
            <p>2018</p>
      </figcaption>
</figure>

这是克隆的元素无法容纳的CSS代码。 main是图的父元素

main{
  grid-column: 1/ -1;
  grid-row: 2/ -1;
  padding-top: 8rem;

  display: grid;
  grid-template-rows: repeat(4, minmax(22rem, 25rem));
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  grid-gap: 2rem;

}

.figure{
    padding-bottom: 3rem;
    position: relative;

  &--1{
    grid-column: 1/ span 1;
    grid-row: 1 / span 1;
   }

&__movie{
  width: 100%;
  height: 100%;
  filter: brightness(85%);
  border: .3rem solid $color-primary-dark;
  border-radius: .6rem;

  transition: all .2s;
  // backface-visibility:visible;

  &:hover{
    border: .3rem solid $color-blue-light-2;
    border-radius: 3px;
    filter: brightness(70%);

    & + p,
    & ~ .figure__icon--1,
    & ~ .figure__icon--2,
    & ~ .figure__star{
      opacity: 1;
     }
   }

  & + p{
    position: absolute;
    top: 76%;
    right: 8%;
    font-size: 1.2rem;
    font-weight: 400;
    opacity: 0;
  }
}

&__icon--1{
  width: 2.2rem;
  height: 2.2rem;
  fill: $color-grey-dark-3;

  position: absolute;
  top: 2%;
  right: 3%;
  opacity: 0;
 }

&__icon--2{
  width: 2rem;
  height: 2rem;
  fill:  $color-grey-dark-3;

  position: absolute;
  top: 2%;
  left: 6%;
  opacity: 0;
}

&__star{
  display: flex;
  justify-content: start;

  position: absolute;
  top: 77%;
  left: 6%;
  opacity: 0;

 &--1,
 &--2,
 &--3,
 &--4,
 &--5{
   width: 1.4rem;
   height: 1.4rem;
   fill: orange;
  }
}

&__caption p{
   color: $color-grey-dark-2;
   font-weight: 300;
 }
}

我要复制这30次，只更改这四个元素。我怎么能使用javascript复制这些内容而不重写30次？

Answer 1

方法：

将要更改的属性存储在数组中。
使用cloneNode(true)克隆整个div结构。
选择要更改的特定标签/元素并更新其值
使用appendChild将其附加到父节点

以您的示例进行说明：
由于您要修改4个属性，因此可以将它们存储在数组中，例如

let array = [
  {
    img: "img/mov-2.jpg",
    p1: "9.7/10",
    p2: "2017",
    h3: "Ready Player 1"
  },
  {
    img: "img/mov-5.jpg",
    p1: "8.7/10",
    p2: "2016",
    h3: "Ready Player 2"
  },
  {
    img: "img/mov-6.jpg",
    p1: "6.7/10",
    p2: "2016",
    h3: "Ready Player 3"
  }
]

//Now, get the node you want to clone:

let figure = document.getElementsByClassName("figure figure--1")[0];

//Using the HTML structure given by you:

<figure class="figure figure--1">
      <img src="img/mov-1.jpg" alt="mov-1" class="figure__movie">
      <p class="rate">7.7/10</p>
      <svg class="figure__icon--1">
        <use xlink:href="img/sprite.svg#icon-heart"></use>
      </svg>
      <svg class="figure__icon--2">
        <use xlink:href="img/sprite.svg#icon-eye"></use>
      </svg>

      <div class="figure__star">
        <svg class="figure__star--1">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--2">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--3">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--4">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--5">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
      </div>

      <figcaption class="figure__caption">
            <h3 class="h3">Ready Player one</h3>
            <p class="year">2018</p>
      </figcaption>
</figure>
<div id="parent"></div>

注意：我在要修改其值的标签上添加了额外的类。还添加了一个父div，我们可以在其中附加新创建的节点。
现在，我们可以编写javascript函数，该函数将遍历值并将其附加到div

let parent = document.getElementById("parent");
function appendToParent(data) {
  newDom = figure.cloneNode(true)
  newDom.getElementsByClassName("figure__movie")[0].src = data.img
  newDom.getElementsByClassName("rate")[0].innerHTML = data.p1
  newDom.getElementsByClassName("year")[0].innerHTML = data.p2
  newDom.getElementsByClassName("h3")[0].innerHTML = data.h3
  parent.appendChild(newDom)
}

array.forEach(function(data) {
  appendToParent(data)
})

希望有帮助。如有任何疑问，请回复。

如何移动html元素并更改其中的少量内容

1 个答案: