Get a single TRUE or FALSE on several conditionals

2

I would like to do the following in the img variable below: Get true if ALL images (img tag) are EQUAL or false if ONE OR MORE is DIFFERENT from the others. I tried loop for , but it does not work as expected, because I could not find a way to compare each index with the others and get a single / em> or false . Faced with this, I had no idea what to do.

var img = '<img src="pic_1.jpg" />; <img src="pic_1.jpg" />; <img src="pic_1.jpg" />; <img src="pic_1.jpg" />'; // Todas as imagens são iguais  - Daria true
var img = '<img src="pic_1.jpg" />; <img src="pic_2.jpg" />; <img src="pic_1.jpg" />; <img src="pic_1.jpg" />'; // Uma imagem é diferente das outras - Daria false
var img = '<img src="pic_1.jpg" />; <img src="pic_1.jpg" />; <img src="pic_2.jpg" />; <img src="pic_2.jpg" />'; // Duas imagens são diferentes das outras - Daria false

img = img.split(';');

for (var i = 0; i < img.length; i++) {
console.log(img[i] != img[0]);
}
    
asked by anonymous 27.06.2015 / 22:39

2 answers

1

You started off well in logic, but you missed out on 3 things:

  • When you do split will have some img with space on the front, to remove this just use .trim() . So he was giving false to his, because he compared one without front space to another with space ahead.

  • You have set index [0] to for , if you want to compare current with next, you start for from 1 and compare with the previous one.

  • Use a variable to make the control equal or not.

var img = '<img src="pic_1.jpg" />; <img src="pic_1.jpg" />; <img src="pic_1.jpg" />; <img src="pic_1.jpg" />'; // Todas as imagens são iguais  - Daria true
//var img = '<img src="pic_1.jpg" />; <img src="pic_2.jpg" />; <img src="pic_1.jpg" />; <img src="pic_1.jpg" />'; // Uma imagem é diferente das outras - Daria false
//var img = '<img src="pic_1.jpg" />; <img src="pic_1.jpg" />; <img src="pic_2.jpg" />; <img src="pic_2.jpg" />'; // Duas imagens são diferentes das outras - Daria false

img = img.split(';');

var igual = true;
for (var i = 1; i < img.length; i++) {
  
    // se alguma for diferente então já retorna falso
    if(img[i-1].trim() != img[i].trim()) {
        igual = false;
        break;
    }
  
}

console.log(igual);

Now if you want a more practical example to compare the src of the images, it would do something like this:

function isImagensIguais() {
   var imgs = document.querySelectorAll('img');
  
   for (var i = 1; i < imgs.length; i++) {
      // se alguma for diferente então já retorna falso
      if(imgs[i-1].src != imgs[i].src) {
          return false;
      }
  }
  return true;
}

window.onload = function () {
  alert(isImagensIguais());  
}
<img src="pic_1.jpg" />
<img src="pic_1.jpg" />
<img src="pic_2.jpg" />
<img src="pic_2.jpg" />
    
27.06.2015 / 22:46
2

I suggest using the browser and the DOM to interpret this rather than using .split(';') . Anyway I leave a suggestion that can be adapted in case you want to use it in it.

function verificar(str) {
    var div = document.createElement('div');
    div.innerHTML = str;
    var imagens = div.children;
    for (var i = 0; i < imagens.length; i++) {
        if (imagens[0].src != imagens[i].src) return false
    }
    return true;
}

jsFiddle: link

This function takes a string as you have in the example, inserts it into a div that is used only in browser memory, and then compares if the first image and the following images have the same src . It returns true if all have, and false if at least one does not.

    
27.06.2015 / 22:50