[Résolu] Masquer tous les éléments qui ne correspondent pas au clic (

Bonjour

Il y a quelques jours j'ai posé une question à laquelle vous avez répondu, mais en fait je ne suis pas allée au bout de ma réflexion.

Ma première question était sur :
une liste d'images
et des div qui correspondent plus bas dans la page, qui sont masquées
Y -a-t-il un moyen de dire que quand je clique sur li:eq(0), j'affiche la div "oeuvre0" et ainsi de suite ?

La réponse était :
$('li').click(function(){
var index = $(this).index();
$( '#oeuvre' + index ).show();
});
Parfait, mais maintenant il faut que lorsque j'affiche une œuvre, et que je clique sur une autre image, cela masque la première et affiche uniquement celle sur laquelle j'ai cliqué, sinon j'en ai plusieurs affichées en même temps.


J'ai essayé avec un not()

$('#oeuvre' + index).not($('#oeuvre' + index)).hide('slow');

Mais ça ne fait rien.
Apparemment la syntaxe est correcte mais je ne maîtrise pas assez pour comprendre

Merci de votre précieuse aide.

Bonjour,

Tu n'es pas loin mais ce que tu écrit n'a pas beaucoup de sens : $('#oeuvre' + index) est le selecteur que tu construit pour savoir quelle oeuvre afficher.
Ça revient à écrire :

$('#oeuvre2').not($('#oeuvre2')).hide('slow');

Ce qui n'a pas de sens.
Par contre tu peux cibler les autres div dont l'ID commence par oeuvre et les masquer :

$('#oeuvre' + index).show('slow');
$('div[id^="oeuvre"]').not(this).hide('slow');

Ou alors plus simple si tout tes div #oeuvreN sont contenus dans un div parent (qui ne contient rien d'autre) tu peux utiliser .siblings() qui va sélectionner tous les div frères de celui que tu a ciblé, du coup ça s'écrit en une ligne :

$('#oeuvre' + index).show('slow').siblings().hide('slow');

Merci encore mille fois !

En fait, au moment de poster je me suis rendu compte que ce que j'écrivais n'avais pas de sens.

J'avais essayé avec siblings, mais la construction de ma page ne me le permettait pas, ou il faudrait que je reprenne tout le html et ... si j'avais le temps.

Je n'avais pas pensé au sélecteur : id^="oeuvre.

Je reviendrai peut-être avec une autre question pour ma page, car ce que je fais fonctionne avec 3 images et leur suite, mais pas avec 6, ou 9.
Mais la je crois qu'il s'agira plus de css/html et je devrais y arriver.

Merci encore

Désolé j'ai fait une erreur dans ma solution précédente, car ce n'est pas une div#oeuvre que tu cliques donc le $('div[id^=oeuvre]').not( this ) n'est pas correct puisque le this correspond au lien que tu as cliqué.

Donc soit tu ne te prends pas la tête :

$('div[id^="oeuvre"]').hide('slow');
$('#oeuvre' + index).show('slow');

Tu caches d'abord tous les id qui commencent par oeuvre et ensuite tu affiche celui qui correspond, soit veux vraiment cibler les autres avec .not() et dans ce cas c'est plutôt :

var oeuvreCible = document.getElementById( 'oeuvre' + index );
$( oeuvreCible ).show('slow');
$('div[id^="oeuvre"]').not( oeuvreCible ).hide('slow');

C'est peut être plus propre.
Mais pour le siblings, c'est si compliqué d'englober toutes tes div#oeuvre dans un container ?

Ça fonctionne parfaitement, merci beaucoup !