Afficher/Masquer Multiple Div

Version imprimable

Bonjour à tous,

J'essai d'afficher ou masquer un div selon son identifiant que je récupère via le selector.
Problème : au clic sur le bouton toutes les Divs se masquent au lieu de m’afficher celle que je souhaite.
je sèche, mes appels sont pourtant bien identifiés et les divs également ...

(je précise que je ne suis qu'un amateur, merci).
Quelqu'un voit-il le problème ?

categorie.js

Code:

1
2
3
4
5
6
7
8
 
lignes_AffSSCat += '<a type="button" class="DelSSC" onclick="AffConfSupp(ConfSousCat'+response.souscategories[i].souscategories_id +')" ><i class="glyphicon glyphicon-trash"></i></a>';
 
 
    					  lignes_AffSSCat += '<div id="ConfSousCat'+response.souscategories[i].souscategories_id +'" class="contentDiv" style="display: none;">';
    					  lignes_AffSSCat += '<div class="col-sm-5"></div>';
    					  lignes_AffSSCat += '<div class="col-sm-7"><p>Voulez-vous supprimer la catégorie ?</p></div>';
    					  lignes_AffSSCat += '</div>';

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
function AffConfSupp(thechosenone) {
     $('.contentDiv').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).slideDown(200);
          }
          else {
               $(this).slideUp(600);
          }
     });
 
console.log(" souscategories =  "+ thechosenone); //LOGOK	
}

dans le code HTML généré, vous avez par exemple cela :

Code:

onclick="AffConfSupp(ConfSousCat3)"

donc le paramètre que vous allez passer à la fonction est un objet HTMLDivElement que vous comparez avec une chaine de caractères.
ce que vous pouvez modifier par exemple, c'est l'appel à la fonction pour passer une chaine de caractère comme cela :

Code:

onclick="AffConfSupp('ConfSousCat3')"

mais vous pouvez aussi utiliser jQuery pour ne pas avoir de JavaScript dans le code HTML comme cela :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$(function () {
 
    var lignes_AffSSCat = "";
 
 
    $([1, 2, 3, 4]).each(function (index, element) {
 
        lignes_AffSSCat += '<a type="button" class="DelSSC" data-sous-cat="ConfSousCat' + element + '"><i class="glyphicon glyphicon-trash"> action </i></a>';
        lignes_AffSSCat += '<div id="ConfSousCat' + element + '" class="contentDiv" style="display: none;">';
        lignes_AffSSCat += '<div class="col-sm-5">élément ' + element + '</div>';
        lignes_AffSSCat += '<div class="col-sm-7"><p>Voulez-vous supprimer la catégorie ?</p></div>';
        lignes_AffSSCat += '</div>';
 
    });
 
    $("body").append(lignes_AffSSCat);
 
 
    $("a.DelSSC").click(function () {
 
        var thechosenone = $(this).data("sousCat");
 
        console.log(" souscategories =  "+ thechosenone);
 
 
        $('.contentDiv').each(function(index) {
 
            if ($(this).attr("id") === thechosenone) {
                $(this).slideDown(200);
            } else {
                $(this).slideUp(600);
            }
 
        });
 
 
    });
 
 
});

26/03/2018, 19h48
karpe

Merci Mathieu !
Bien vu, j'ai effectivement rectifié mon appel et maintenant ça glisse tout seul !

Code:

onclick="AffConfSupp(\'ConfSousCat'+response.souscategories[i].souscategories_id +'\')"