Je veux comparer le tableau de l'objet (image) et la balise span (image). Sur le bouton, cliquez sur I besoin de vérifier si l'image déposée et l'image span est égale ou non. Donc, veuillez m'aider à cela.
composant.html: p> p> composant.ts: p> 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()
}
}
}
4 Réponses :
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 ;)
}
J'ai mis à jour ma question. Pouvez-vous s'il vous plaît vérifier cela nw. J'ai besoin de vérifier ceci (this.destination = [élément];) avec l'image span.
Critique ici. Je ne recommanderai pas la suppression mais s'il vous plaît ajouter des détails à votre réponse décrivant pourquoi votre code est une solution.
Si vous souhaitez simplement vérifier que votre portée existante contient des images présentes dans votre objet d'origine.
J'ai mis à jour ma question. Pouvez-vous s'il vous plaît vérifier cela nw.
J'ai besoin de vérifier ceci (this.destination = [élément];) avec l'image span.
Vous pouvez itérer et correspondre à tous.
basé sur la mise à jour. p> p>
<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>
J'ai mis à jour ma question. Pouvez-vous s'il vous plaît vérifier cela nw. J'ai besoin de vérifier ceci (this.destination = [élément];) avec l'image span.
J'ai essayé votre code mais je suis confronté à un problème. Donc, vérifiez bien le lien. Stackoverflow.com/Questtions/60964256/...
sa bonne amende pour l'origine mais elle ne fonctionne pas pour la destination ... pour la première image sa montrant true même sa même image mais sa montrant false pour les deux autres, même c'est la même chose
Je ne sais pas sur TS, mais vous pouvez le faire avec Vanilla JS. Vous pouvez comparer les URL comme ceci, puis appuyer toutes les URL correspondantes à une nouvelle matrice et toutes les URL non correspondantes à un autre tableau:
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)
Pourriez-vous s'il vous plaît être plus précis? Que souhaitez-vous comparer? Voulez-vous savoir si les images de la matrice sont déjà présentes dans le DOM?