Discussion :

[artenis]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Toufik83]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[artenis]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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