比较对象数组（图像）和跨度标签（图像）答案

【问题标题】：Compare array of objects (image) and span tags (image)比较对象数组（图像）和跨度标签（图像）
【发布时间】：2020-03-30 09:17:23
【问题描述】：

我想比较对象（图像）和跨度标记（图像）的数组。在按钮上单击我需要检查丢弃的图像和跨度图像是否相等。请帮我解决这个问题。

component.html:

 <div class="field-box-samp">
        <div class="captchaText">
          <span id="circle_text"><img src="https://www.gstatic.com/webp/galler/1.png"></span>
          <span id="triangle_text"><img src="https://www.gstatic.com/webp/galler/2.png"></span>
          <span id="square_text"><img src="https://www.gstatic.com/webp/galler/3.png"></span>
        </div>
    </div>

component.ts:

    origin = [{    
    img: 'https://www.gstatic.com/webp/gallery3/1.png'
  },
  {    
      img: 'https://www.gstatic.com/webp/gallery3/2.png'
  },
  {   
      img: 'https://www.gstatic.com/webp/gallery3/3.png'
  }];
  //---------------

  destination = [
  ];
  //--------------- 
  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      let item:any = event.previousContainer.data[event.previousIndex];
      let copy:any = JSON.parse(JSON.stringify(item));
      let element:any = {};
        for(let attr in copy){
          if(attr == 'title'){
            element[attr] = copy[attr] += ' copy';
          }else{
            element[attr] = copy[attr];
          }
        }
      this.destination=[element];
      clearimg()        
    }
   }  
  }

【问题讨论】：

您能说得更具体些吗？你想比较什么？您想知道数组中的图像是否已经存在于 DOM 中吗？

标签： javascript arrays angular typescript object

【解决方案1】：

const imageNodes = document.querySelectorAll('.captchaText img');
const origin = [{ img: '1' }, { img: '2' }, { img: '3' }];

const isMatch = Array.from(imageNodes).every((img, idx) => img.src === origin[idx].image);

if (isMatch) {
  // business logic ;)
}

【讨论】：

我已经更新了我的问题。你能检查一下吗？我需要用跨度图像检查这个（this.destination=[element];）。
审稿人在这里。我不建议删除，但请在您的答案中添加详细信息，说明您的代码为何是解决方案。

【解决方案2】：

如果您只想检查现有跨度是否包含您的原始对象中存在的图像。

// dont use 'origin' it is also an keyword in js
    let originUrl = [{    
        img: 'https://www.gstatic.com/webp/galler/1.png'
      },
      {    
          img: 'https://www.gstatic.com/webp/galler/2.png'
      },
      {   
          img: 'https://www.gstatic.com/webp/galler/3.png'
      }];
    const matchSpanFn = spanID => {
        let isExist = false;
        for (var i in originUrl) {
             if (originUrl[i].img === document.querySelectorAll('#'+spanID+' img')[0].getAttribute('src'))
                isExist = true
        }
        return isExist

        }

    matchSpanFn('circle_text') // here you can pass any id to check with constant node structure as shown above

【讨论】：

我已经更新了我的问题。你能检查一下吗？
我需要用 span 图像检查这个 (this.destination=[element];)。

【解决方案3】：

您可以迭代并匹配所有内容。

基于更新。

/*
const origin = [
  { img: "https://www.gstatic.com/webp/galler/1.png" },
  { img: "https://www.gstatic.com/webp/galler/2.png" },
  { img: "https://www.gstatic.com/webp/galler/3.png" }
];
*/
function matchImages(domImages, destination) {
  return destination.some((item, index) => item.img === domImages[index].src);
}

drop(event: CdkDragDrop<string[]>) {
  if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    let item:any = event.previousContainer.data[event.previousIndex];
    let copy:any = JSON.parse(JSON.stringify(item));
    let element:any = {};
      for(let attr in copy){
        if(attr == 'title'){
          element[attr] = copy[attr] += ' copy';
        }else{
          element[attr] = copy[attr];
        }
      }
    let allImages = document.querySelectorAll(".captchaText span img");
    this.destination=[element];
    const hasMatchingImage = matchImages(allImages, this.destination)
    console.log("Has a MatchingImage", hasMatchingImage);

    clearimg()        
  }
 }

let allImages = document.querySelectorAll(".captchaText span img");
const origin = [
  { img: "https://www.gstatic.com/webp/galler/1.png" },
  { img: "https://www.gstatic.com/webp/galler/2.png" },
  { img: "https://www.gstatic.com/webp/galler/3.png" }
];

const hasSame = origin.every(
  (item, index) => item.img === allImages[index].src
);
console.log("All Same", hasSame);

<div class="field-box-samp">
            <div class="captchaText">
              <span id="circle_text"><img src="https://www.gstatic.com/webp/galler/1.png"></span>
              <span id="triangle_text"><img src="https://www.gstatic.com/webp/galler/2.png"></span>
              <span id="square_text"><img src="https://www.gstatic.com/webp/galler/3.png"></span>
            </div>
        </div>

【讨论】：

我已经更新了我的问题。你能检查一下吗？我需要用跨度图像检查这个（this.destination=[element];）。
我已经尝试过您的代码，但遇到了一些问题。所以请检查链接。 stackoverflow.com/questions/60964256/…
它在原产地工作正常，但在目的地不工作......对于第一张图像，即使它不是相同的图像，它也显示为真，但对于其他两个图像，即使它相同，它也显示为假

【解决方案4】：

我不知道 TS，但你可以用 vanilla JS 做到这一点。您可以像这样比较 URL，然后将所有匹配的 URL 推送到一个新数组，将所有不匹配的 URL 推送到另一个数组：

const allSpanImges = [...document.querySelectorAll('span img')];

let match = [];
let noMatch = [];

allSpanImges.forEach((spanImg, index) => {
    spanImg.src.localeCompare(origin[index].img) ? match.push(spanImg.src) : noMatch.push(spanImg.src)
});

console.log(match)

【讨论】：