Récupération attr image + recherche mot dans attr + correspondance mot avec image

Version imprimable

Bonjour,
j'ai besoin d'aide pour faire fonctionner ma fonction:

- J'ai une liste d'images, sur chacune d'elle je veux ajouter un titre et une icône.
- le titre de l'image doit être ajouté en fonction d'un mot contenu/présent dans l'url de l'image affichée.
- l'icône de l'image doit être ajouté en fonction du titre affiché

Mes 4 première images représentent respectivement : Anglais, boxe thai, cyclisme, modern-jazz. j'en ai 29 au total.
Je tente d'alaborer un script jquery qui analyse chaque image et lui applique le titre et l'icône qui corresponde (à l'url de) l'image
Les url de mes images sont sous cette forme : http://monsite.fr/images/cours-anglais.jpg ; http://monsite.fr/images/boxe-thai-kick-boxing-k1.jpg ; http://monsite.fr/images/cyclisme.jpg ; http://monsite.fr/images/danse-moder...ssique-grs.jpg.

voici mon script :
Dans l'état actuel le mot Anglais s'affiche sur les 29 images !
Code:

1 2 3 4 5 6 7 8 9 10 11 var ls = jQuery.noConflict(); ls(document).ready(function(){ ls("#sections-img-square .vc_single_image-wrapper img").each(function(){ var txturl = ls(this).attr('src'); var correspond = txturl.search(/anglais/);// et voici les auttres termes à comparer boxe ; cyclisme; modernjazz if (correspond > -1) { //le problème vient probablement de cette ligne, mais je en sais pas comment faire la comparaison entre deux fonctions ls("#sections-img-square .vc_single_image-wrapper .title-sec").text("ANGLAIS"); } }); });
POur les icônes je pense pas rencontrer de problèmes ce sera plus simple une fois que j'aurais afficher le titre de chaque image.

Ce qui serait bien, ce serait de pouvoir comparer plusieurs mots avec plusieurs url d'images en une fois avec la fonction "match", mais là je dépasse mes limites de connaissances et d'expérimentation.

merci à ceux qui pourront m'aider et me guider.

bonsoir,
supposons la variable table est la source des tes images.
si j'ai bien compris ton souci...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
var table = ['http://monsite.fr/images/cours-anglais.jpg', 'http://monsite.fr/images/boxe-thai-kick-boxing-k1.jpg', 'http://monsite.fr/images/cyclisme.jpg', 'http://monsite.fr/images/danse-moder...ssique-grs.jpg'],
  table_compare = ['anglais', 'kick-boxing', 'cyclisme', 'danse-moder'];
 
var ls = jQuery.noConflict(),
  txturl, correspond;
ls(document).ready(function() {
  ls(table).each(function(i) {//pour chaque élément dans table[]
    ls(table_compare).each(function(j) {//pour chaque élément dans table_compare.
      txturl = ls(table_compare)[j];
      correspond = ls(table)[i].search(ls(table_compare)[j]);
      if (correspond > -1) {
        ls('body').append('<p><b>' + ls(table_compare)[j] + '</b> trouvé , mot recherché :' + ls(table_compare)[j] + ', index:' + j + '</p>');
      }
    });
 
  });
});

Résolu par Toufik83

Grâce aux conseils et solutions de Toufik83, j'ai entièrement résolu mon problème. Merci
Voici la solution de Toufik83 pour mon problème

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id='sections-usml-img-square'>
  <div class="vc_single_image-wrapper   vc_box_border_grey">
    <img width="100" height="100" src="http://www.site.fr/wp-content/uploads/21148077-Enthousiaste-femme-enseignement-cours-d-anglais-l-cole-Banque-dimages.jpg" class="vc_single_image-img attachment-full" alt="" />
    <div class="list-sections">
      <div class="icon-sec"></div>
      <div class="title-sec">
      </div>
    </div>
  </div>
  <div class="vc_single_image-wrapper   vc_box_border_grey">
    <img width="100" height="100" src="http://www.site.fr/wp-content/uploads/18630269-Cycliste-de-v-lo-de-montagne-cheval-athl-te-voie-unique-mode-de-vie-sain-et-actif-lever-faisant-du-s-Banque-dimages.jpg" class="vc_single_image-img attachment-full" alt=""
    />
  </div>
  <div class="vc_single_image-wrapper   vc_box_border_grey">
    <img width="100" height="100" src="http://www.site.fr/wp-content/uploads/20893337-deux-hommes-de-race-blanche-qui-exercent-la-boxe-thai-en-studio-silhouette-sur-fond-blanc-Banque-dimages.jpg" class="vc_single_image-img attachment-full" alt="" />
  </div>
 
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ls = $.noConflict();
var srcs = [],
  titlecompare = ['anglais', 'boxe', 'cycliste', 'moderne'],
  urlimg, txturl, correspond;
ls('#sections-usml-img-square').find('img[src]')
  .each(function(k, el) { //parcourir toutes les <img> ayant l'attribut 'src',et pour le el ajouté dans la fonction, el=this
    ls(titlecompare).each(function(j) { //parcourir le titlecompare
      txturl = ls(titlecompare)[j];
      correspond = ls(el).attr('src').toLowerCase().search(txturl);//important : toLowerCase() rend l'attribut 'src' en minuscule
      if (correspond > -1) { //si la table srcs contient au moins le mot : txturl, si oui correspond vaut un chiffre >0, sinon correspond vaut -1. 
        console.log('le mot :' + ls(titlecompare)[j] + ' a été trouvé, index :' + j);
       ls(el).parent('.vc_single_image-wrapper').find('.title-sec').append('<span>' + txturl + '</span>');
      }
    });
 
  });