主页 / 问题 / 1095719
Accepted
Monkey Mutant
Asked:2020-03-17 16:43:17 +0000 UTC2020-03-17 16:43:17 +0000 UTC

为什么数组重复？

  • 772

问题在标题中-我无法弄清楚为什么会这样...

let parent = document.querySelector(".items");

let units = [{
  "image": "https://im0-tub-kz.yandex.net/i?id=d8f146ffd72ad3ad74aa0a7d30a79e82&n=13&exp=1",
  "name": "iphone 6",
  "price": "$200",
}, {
  "image": "https://www.hardwareluxx.ru/images/cdn01/E39DA3FE88B24CC9AA35003A8035E70B/img/DD33455A05B9440C8C7199EF6EF82995/apple_iphone8_product_red_00002_DD33455A05B9440C8C7199EF6EF82995.jpg",
  "name": "iphone7",
  "price": "$400",
}, {
  "image": "https://apollo-frankfurt.akamaized.net/v1/files/uhjqavbjoxm21-KZ/image;s=644x461",
  "name": "iphone 8",
  "price": "$500",
}, {
  "image": "https://stot64.ru/wp-content/uploads/2019/12/f19bdb6d96b4cbedfbb0018ec0a3a97a.jpg",
  "name": "iphone XS",
  "price": "$2000",
}];

let goo = "";

for (item in units) {
  let block = document.createElement("div");
  goo += `<img src="${units[item].image}" alt="${units[item].name}">`;
  goo += `<h3>${units[item].name}</h3>`;
  goo += `<p>${units[item].price}</p>`;
  block.innerHTML = goo;
  parent.append(block);
}
.items {
  display: flex;
}

img {
  display: block;
  max-width: 100%;
}
<div class="items"></div>

javascript

1 个回答

  1. Best Answer

    您必须创建一个新的div并将其添加到parent数组迭代中。
    简单来说，您拥有数组中每个元素的数据。
    更准确地说，对于您将数据添加到的每个元素，goo并且+=每次将它们立即添加到parent. 将它们带出边界for，一切都会正常工作。

        let parent = document.querySelector(".items");

    let units = [{
        "image": "https://im0-tub-kz.yandex.net/i?id=d8f146ffd72ad3ad74aa0a7d30a79e82&n=13&exp=1",
        "name": "iphone 6",
        "price": "$200",
    }, {
        "image": "https://www.hardwareluxx.ru/images/cdn01/E39DA3FE88B24CC9AA35003A8035E70B/img/DD33455A05B9440C8C7199EF6EF82995/apple_iphone8_product_red_00002_DD33455A05B9440C8C7199EF6EF82995.jpg",
        "name": "iphone7",
        "price": "$400",
    }, {
        "image": "https://apollo-frankfurt.akamaized.net/v1/files/uhjqavbjoxm21-KZ/image;s=644x461",
        "name": "iphone 8",
        "price": "$500",
    }, {
        "image": "https://stot64.ru/wp-content/uploads/2019/12/f19bdb6d96b4cbedfbb0018ec0a3a97a.jpg",
        "name": "iphone XS",
        "price": "$2000",
    }];

    let goo = "";

    let block = document.createElement("div");
    for (let item in units) {
        goo += `<img src="${units[item].image}" alt="${units[item].name}">`;
        goo += `<h3>${units[item].name}</h3>`;
        goo += `<p>${units[item].price}</p>`;
        block.innerHTML = goo;
    }
    parent.append(block);
        .items {
        display: flex;
    }

    img {
        display: block;
        max-width: 100%;
    }
    <div class="items"></div>

    或者你可以把 nullgoo放在里面for：

        let parent = document.querySelector(".items");

    let units = [{
        "image": "https://im0-tub-kz.yandex.net/i?id=d8f146ffd72ad3ad74aa0a7d30a79e82&n=13&exp=1",
        "name": "iphone 6",
        "price": "$200",
    }, {
        "image": "https://www.hardwareluxx.ru/images/cdn01/E39DA3FE88B24CC9AA35003A8035E70B/img/DD33455A05B9440C8C7199EF6EF82995/apple_iphone8_product_red_00002_DD33455A05B9440C8C7199EF6EF82995.jpg",
        "name": "iphone7",
        "price": "$400",
    }, {
        "image": "https://apollo-frankfurt.akamaized.net/v1/files/uhjqavbjoxm21-KZ/image;s=644x461",
        "name": "iphone 8",
        "price": "$500",
    }, {
        "image": "https://stot64.ru/wp-content/uploads/2019/12/f19bdb6d96b4cbedfbb0018ec0a3a97a.jpg",
        "name": "iphone XS",
        "price": "$2000",
    }];


    for (let item in units) {
        let block = document.createElement("div");
        let goo = "";
        goo += `<img src="${units[item].image}" alt="${units[item].name}">`;
        goo += `<h3>${units[item].name}</h3>`;
        goo += `<p>${units[item].price}</p>`;
        block.innerHTML = goo;
        parent.append(block);
    }
        .items {
        display: flex;
    }

    img {
        display: block;
        max-width: 100%;
    }
    <div class="items"></div>

    • 2

相关问题