1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Comment optimiser ce code s'il vous plait ?

lhorn - Modifié par lhorn le 8/06/2016 à 11:51
cs_AccessToYou
Messages postés
34
Date d'inscription
mardi 21 novembre 2000
Statut
Membre
Dernière intervention
16 juin 2016
 - 15 juin 2016 à 04:04
Bonjour,


est-ce qu'il est possible d'optimiser le code si dessous pour éviter la répétition du code de façon à ce que le numéro reste en variable, pour que ce soit valable quelque soit le nombre d'éléments



et ainsi avoir un bout de code ou VAR est une variable ou une valeur généré par une fonction 

$('#dynamiclink-LG-VAR').on('click', function(){

    $('.item-lightbox').trigger('click');

    gallery.data('lightGallery').slide(VAR);

});



code actuel : 



<script language="javascript">

 

///ok associer unz classe

//https://jsfiddle.net/Leecj5pr/

//http://jsfiddle.net/sachin377/QQpdL/4/

var g = $('.lightgallery-owl');

var gallery = g.lightGallery({

            selector: '.item-lightbox'

});

$('#dynamiclink-LG-0').on('click', function(){

    $('.item-lightbox').trigger('click');

});

$('#dynamiclink-LG-1').on('click', function(){

    $('.item-lightbox').trigger('click');

    gallery.data('lightGallery').slide(1);

});

$('#dynamiclink-LG-2').on('click', function(){

    $('.item-lightbox').trigger('click');

    gallery.data('lightGallery').slide(2);

});

$('#dynamiclink-LG-3').on('click', function(){

    $('.item-lightbox').trigger('click');

    gallery.data('lightGallery').slide(3);

});

$('#dynamiclink-LG-4').on('click', function(){

    $('.item-lightbox').trigger('click');

    gallery.data('lightGallery').slide(4);

});

$('#dynamiclink-LG-5').on('click', function(){

    $('.item-lightbox').trigger('click');

    gallery.data('lightGallery').slide(5);

});

$('#dynamiclink-LG-6').on('click', function(){

    $('.item-lightbox').trigger('click');

    gallery.data('lightGallery').slide(6);

});

$('#dynamiclink-LG-7').on('click', function(){

    $('.item-lightbox').trigger('click');

    gallery.data('lightGallery').slide(7);

});

$('#dynamiclink-LG-8').on('click', function(){

    $('.item-lightbox').trigger('click');

    gallery.data('lightGallery').slide(8);

});

$('#dynamiclink-LG-9').on('click', function(){

    $('.item-lightbox').trigger('click');

    gallery.data('lightGallery').slide(9);

});

$('#dynamiclink-LG-10').on('click', function(){

    $('.item-lightbox').trigger('click');

    gallery.data('lightGallery').slide(10);

});

$('#dynamiclink-LG-11').on('click', function(){

    $('.item-lightbox').trigger('click');

    gallery.data('lightGallery').slide(11);

});

//etc; ... créer un array ou autre

 

</script>




© 2016 Microsoft Conditions Confidentialité et cookies Développeurs Français

3 réponses

Réponse 1 / 3
jordane45
Messages postés
36056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 août 2022
 351
8 juin 2016 à 12:02
Bonjour,

Actuellement tu cibles les élements via leur ID....
Mets leur une CLASS (même fictive tu t'en moques.. c'est juste pour servir d'identificateur)

par exemple : 
 <input id='toto1' class='majolieclassfictive' type='text'>
 <input id='toto2' class='majolieclassfictive' type='text'>
 <input id='toto3' class='majolieclassfictive' type='text'>



$('.majolieclassfictive').on('click', function(){
   var id = $(this).id;
   alert(' ID : '+id);  
});

0
Réponse 2 / 3
lhorn
8 juin 2016 à 14:46
Tout d'abord merci de t'intéresser à mon problème.

Je me rends compte que je n'ai pas posé le contexte:
j'utilise le plugin lightgallery ( http://sachinchoolur.github.io/lightGallery/) qui créé une gallery dans une modale lorsque l'on clique sur un thumbnail de cette gallerie.

Mais Je voudrais en plus de cela que, si je clique sur un certain type de liens lien de ma page, que ce lien ouvre la lightgallery directement à la bonne slide.

pour cela il faut que j'utilise un trigger :
dans mon exemple : 
$('.item-lightbox').trigger('click');
    gallery.data('lightGallery').slide(1);


où .item-lightbox est la classe de l'item de mon carousel. et .slide(X); permet de cibler la position de la slide dans la gallery . c'est à dire gallery.data('lightGallery')..slide(0) va cibler la première item, gallery.data('lightGallery')..slide(1) va cibler la deuxième item etc

pour ce qui est du ciblage effectivement je veux que si on clic sur un bouton de visionnage d'une slide spécifique, elle ouvre la slide attitrée. d'ou l'utilisation d'un identifiant numeroté où le numéro correspondrait à la position de la slide.

d'où mon code 
$('#dynamiclink-LG-X').on('click', function(){
    $('.item-lightbox').trigger('click');
    gallery.data('lightGallery').slide(X);
});


où X est un nombre entier >ou égal à 0.
0
jordane45
Messages postés
36056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 août 2022
 351
8 juin 2016 à 16:51
Et bien .. tu avais suffisamment expliqué ton besoin dès le départ je te rassure.
Et la réponse que je t'ai donné... est bien conforme à ce que tu demandes.
0
Réponse 3 / 3
cs_AccessToYou
Messages postés
34
Date d'inscription
mardi 21 novembre 2000
Statut
Membre
Dernière intervention
16 juin 2016
 1
Modifié par cs_AccessToYou le 15/06/2016 à 04:12
$('[id^="dynamiclink-LG"]').on('click', function(){

$('.item-lightbox').trigger('click');
gallery.data('lightGallery').slide(parseInt(this.id.match(/\d+$/)));

});


TdjProg;
0