Сравните массив объектов (изображение) и теги span (изображение)

Question

Я хочу сравнить массив объекта (изображение) и тег span (изображение). по нажатию кнопки мне нужно проверить, равно ли выброшенное изображение и размер изображения. Пожалуйста, помогите мне в этом.

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()        
    }
   }  
  }

Answer 1

Я не знаю о TS, но вы можете сделать это с ванилью JS. Вы можете сравнить URL-адреса, подобные этим, и затем pu sh все соответствующие 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)

Answer 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

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

Answer 4

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