Je me suis retrouvé à écrire du code similaire à plusieurs reprises et je ne suis pas sûr de la meilleure façon de le faire.

J'ai quelques divs:

    <div id="gallery1">
    some content
</div>

<div id="gallery2">
    some content
</div>

<div id="gallery3">
    some content
</div>

<div id="gallery4">
    some content
</div>

<div id="gallery5">
    some content
</div>

<div id="gallery6">
    some content
</div>

Je vais masquer la galerie 2 - 6 en css puis les montrer en utilisant jquery avec ce qui suit:

$(document).ready(function(){


    // shows gallery 1

    $('.gallery1show').click(function(){

        // prevents link from going anywhere

        event.preventDefault();

        // shows gallery 1

        $('#gallery1').show();

        // hides other galleries

        $('#gallery2').hide();
        $('#gallery3').hide();
        $('#gallery4').hide();
        $('#gallery5').hide();
        $('#gallery6').hide();

    });


    // shows gallery 2

    $('.gallery2show').click(function(){

        // prevents link from going anywhere

        event.preventDefault();

        // shows gallery 2

        $('#gallery2').show();

        // hides other galleries

        $('#gallery1').hide();
        $('#gallery3').hide();
        $('#gallery4').hide();
        $('#gallery5').hide();
        $('#gallery6').hide();

    });


    // shows gallery 3

    $('.gallery3show').click(function(){

        // prevents link from going anywhere

        event.preventDefault();

        // shows gallery 3

        $('#gallery3').show();

        // hides other galleries

        $('#gallery1').hide();
        $('#gallery2').hide();
        $('#gallery4').hide();
        $('#gallery5').hide();
        $('#gallery6').hide();

    });


    ... etc


});

J'ai le sentiment que plutôt que d'utiliser gallery1, gallery2 etc. je devrais juste donner à chaque div une classe de galerie et ensuite utiliser ceci et non cela dans jquery. mais je ne sais pas par où commencer.

Aucun conseil?

0
RMdev2411 22 juil. 2015 à 15:27

5 réponses

Meilleure réponse

Je ferais quelque chose comme ça:

var galleries = $('.gallery');
$('.show-gallery').on('click', function(e) {
  e.preventDefault();
  
  var gallery = $($(this).attr('href'));
  galleries.not(gallery).hide();
  gallery.show();
});
.gallery + .gallery {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery1" class="gallery">gallery 1</div>
<div id="gallery2" class="gallery">gallery 2</div>
<div id="gallery3" class="gallery">gallery 3</div>
<div id="gallery4" class="gallery">gallery 4</div>
<div id="gallery5" class="gallery">gallery 5</div>

<a href="#gallery1" class="show-gallery">Gallery 1</a>
<a href="#gallery2" class="show-gallery">Gallery 2</a>
<a href="#gallery3" class="show-gallery">Gallery 3</a>
<a href="#gallery4" class="show-gallery">Gallery 4</a>
<a href="#gallery5" class="show-gallery">Gallery 5</a>
3
Pete 22 juil. 2015 à 12:33

Je suppose que vous avez donné une partie de votre code html là-bas, donc je suppose qu'il a quelques boutons pour déclencher l'action show de la galerie. Ci-dessous est sur cette hypothèse comment votre HTML doit être

<div class="galleries">
  <div id="gallery1" class="gallery active">
    gallery 1    
  </div>
  <div id="gallery2" class="gallery">
    gallery 2   
  </div>
  <div id="gallery3" class="gallery">
    gallery 3   
  </div>
  <div id="gallery4" class="gallery">
    gallery 4   
  </div>
  <div id="gallery5" class="gallery">
    gallery 5    
  </div>
  <div id="gallery6" class="gallery">
    gallery 6  
  </div>
</div>

<div class="gallery-buttons">
  <button data-id="1">Gallery 1</button>  <button data-id="2">Gallery 2</button>
  <button data-id="3">Gallery 3</button>
  <button data-id="4">Gallery 4</button>
  <button data-id="5">Gallery 5</button>
  <button data-id="6">Gallery 6</button>
</div>

Et css

.gallery{
  display:none;
}

.gallery.active{
  display:block;
}

Et les js

$('.gallery-buttons button').on('click',function(){
    var id = $(this).attr('data-id');

    $('.gallery.active').removeClass('active');
  $('.gallery[id="gallery'+id+'"]').addClass('active');
});

Voici un stylo de démonstration http://codepen.io/anon/pen/zGJaNM

0
Ammadu 22 juil. 2015 à 12:40

Un peu tard, mais voici un exemple de travail: https://jsfiddle.net/

0
mguimard 22 juil. 2015 à 12:38
$('.show').on('click',function() {
    $('.gallery').hide();
    $($(this).attr('href')).show();
});
.gallery {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#gallery1" class="show">Show gallery 1</a>
<a href="#gallery2" class="show">Show gallery 2</a>
<a href="#gallery3" class="show">Show gallery 3</a>
<a href="#gallery4" class="show">Show gallery 4</a>
<a href="#gallery5" class="show">Show gallery 5</a>
<a href="#gallery6" class="show">Show gallery 6</a>

<div id="gallery1" class="gallery"> 
    some content 1
</div>

<div id="gallery2" class="gallery">
    some content 2
</div>

<div id="gallery3" class="gallery">
    some content 3
</div>

<div id="gallery4" class="gallery">
    some content 4
</div>

<div id="gallery5" class="gallery">
    some content 5
</div>

<div id="gallery6" class="gallery">
    some content 6
</div>
0
Turnip 22 juil. 2015 à 12:36

Faire de tous les div une "galerie" de classe commune et la cacher

$(".gallery").hide();

Et afficher uniquement cette galerie qui est nécessaire

$("#gallery1").show();

Ou écrire du code est tel que jQuery identifie dynamiquement div pour l'afficher.

0
Virat 22 juil. 2015 à 12:33