Question

我有一个数组，其中包含汽车列表和图像URL。

在页面上，我列出了很多汽车。我想遍历页面上的所有汽车，如果它在汽车阵列中，那么我想将其图像交换到新的汽车上。

解决这个问题的最佳方法是什么？

<!-- example of on page list of cars -->

<li class="car" data-id="car1">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car12">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car2">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car7">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

-

const cars = [
    {
        "id": "car1"
        "newImage": "imageaddress1"
    },
    {
        "id": "car2"
        "newImage": "imageaddress2"
    },
    {
        "id": "car3"
        "newImage": "imageaddress3"
    },
]

const allCarsNodeList = document.querySelectorAll('.car');
const allCars = Array.from(allProductsNodeList);

首先想到的是使用过滤器将页面上的汽车减少到仅具有特征的汽车，但是我对如何进行比较一无所知，因为数组和页面上的数据属性都不直接存在。

我很困惑！朝着正确方向的任何观点将不胜感激。

Answer 1

您可以尝试关注

首先从cars数组创建一个对象，并以id作为键，将图像url作为值
现在，遍历数组并查看元素ID是否存在于上面创建的对象中。如果存在，请更新对应的src的{{1}}

img

const cars = [{"id": "car1","newImage": "imageaddress1"},{"id": "car2","newImage": "imageaddress2"},{"id": "car3","newImage": "imageaddress3"}];
// Create a map of id and newImage
const obj = cars.reduce((a,c) => Object.assign(a, {[c.id] : c.newImage}), {});
// Get all cars 
const allCars = Array.from(document.querySelectorAll('.car'));
// Iterate over cars
allCars.forEach(c => {
  //if entry exists in the object, update corresponding image
  if(obj[c.dataset.id]) c.querySelector("img").src = obj[c.dataset.id];
});

Answer 2

您需要执行以下步骤：

获取所有类别为car的元素
遍历该元素并找到每个元素的data-id值
使用该data-id值在cars数组中找到匹配的对象
如果找到对象，则将src元素内的图像的.car属性替换为对象的newImage值。

const cars = [{
    "id": "car1",
    "newImage": "imageaddress1"
  },
  {
    "id": "car2",
    "newImage": "imageaddress2"
  },
  {
    "id": "car3",
    "newImage": "imageaddress3"
  }
]

const allCarsNodeList = document.querySelectorAll('.car');
for (var i = 0; i < allCarsNodeList.length; i++) {
  var carId = allCarsNodeList[i].dataset.id;
  var matchCar = cars.find(({id}) => carId === id);
  if (matchCar) {
    allCarsNodeList[i].querySelector('img').src = matchCar.newImage;
  }
}

<li class="car" data-id="car1">1
  <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car12">2
  <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car2">3
  <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car7">4
  <img src="https://imageurl.com/currentImage" alt="">
</li>

在输出上使用inspect element，以检查src属性是否实际上被newImage的值更改了

Answer 3

为我工作：

    const allCarsNodeList = document.querySelectorAll('.car');
    const allCars = Array.from(allCarsNodeList);
    console.log(allCars)
    allCars.forEach(car => {
        carId = car.dataset.id
        correspondingCar = cars.filter(each => each.id === carId)[0]
        console.log(correspondingCar);
        if (correspondingCar !== undefined) {
            car.children[0].src = correspondingCar.newImage
        }
    })

Answer 4

遍历节点列表中的结果，并将data-id与cars数组的id进行比较。如果匹配，则将src属性交换为newImage。

我也在更新alt属性，以便您可以看到src有所更改（因为我没有图像）

const cars = [
    {
        "id": "car1",
        "newImage": "imageaddress1"
    },
    {
        "id": "car2",
        "newImage": "imageaddress2"
    },
    {
        "id": "car3",
        "newImage": "imageaddress3"
    },
]


const allCarsNodeList = document.querySelectorAll('.car');

allCarsNodeList.forEach(function(car, index){
  var id = car.getAttribute('data-id');
  var image = car.querySelector('img');
  cars.forEach(function(carItem){
     if(carItem.id == id) {
      image.setAttribute('src', carItem.newImage);
      image.setAttribute('alt', carItem.newImage) ;
     }
   })
})

<ul>
  <li class="car" data-id="car1">
      <img src="https://imageurl.com/currentImage" alt="currentImage">
  </li>

  <li class="car" data-id="car12">
      <img src="https://imageurl.com/currentImage" alt="currentImage">
  </li>

  <li class="car" data-id="car2">
      <img src="https://imageurl.com/currentImage" alt="currentImage">
  </li>

  <li class="car" data-id="car7">
      <img src="https://imageurl.com/currentImage" alt="currentImage">
  </li>

</ul>

Answer 5

由于您的汽车存储在具有唯一ID的数组中，所以我建议您首先将此汽车数组转换为字典（这将提高性能）：

const cars = [
    {
        "id": "car1",
        "newImage": "imageaddress1"
    },
    {
        "id": "car2",
        "newImage": "imageaddress2"
    },
    {
        "id": "car3",
        "newImage": "imageaddress3"
    }
]

// create cars dictionary from carsList
const carsDictionary = cars.reduce((r, car) => {
    r[car.id] = car;
    return r;
}, {});

// iterate over nodes with car class
const carNodesDict = Array.from(document.querySelectorAll('.car'))
.forEach((node) => {
    const car = carsDictionary[node.dataset.id];
    if (car != null) {
      node.querySelector('img').src = car.newImage;
    }
});

<!-- example of on page list of cars -->

<li class="car" data-id="car1">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car12">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car2">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car7">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

比较两个对象数组

5 个答案: