Classe 1 remplacer classe 2 en jquery ou autre

Résolu
denis -  
 denis -
Bonjour,

par exemple j'ai 2 cadres 

<p class="mini-chat-fenetre-info">le cadre.<span class="icon-mini-chat-supprimer" title="supprimer"></span></p>


et 
<p class="mini-chat-fenetre-conversation-1">mon texte</p>


ensuite imaginer qd je clique sur le <span class="icon-mini-chat-supprimer" title="supprimer"></span> ca fit disparaîte le cadre

là c'est bon

mais le souci c'est que ce cadre ne suite pas 

<p class="mini-chat-fenetre-conversation-1">mon texte</p>


donc j'ai pensé à remettre une nouvelle class 

<p class="mini-chat-fenetre-conversation-1 mini-chat-fenetre-conversation-2">mon texte</p>


si le cadre est là 
<p class="mini-chat-fenetre-info">le cadre.<span class="icon-mini-chat-supprimer" title="supprimer"></span></p>


on met la classe mini-chat-fenetre-conversation-1

et si le cadre mini-chat-fenetre-info disparait

donc j'aimerais que la fenetre mini-chat-fenetre-conversation-1 soit remplacé par mini-chat-fenetre-conversation-2

pour suprimer le cadre
j'ai mis 

 <script>
$(document).ready(function(){
    $(".icon-mini-chat-supprimer").click(function(){
        $(".mini-chat-fenetre-info").hide();
    });
});
</script>


lorsqu'on suprime ca mettra mini-chat-fenetre-conversation-2 à la place mini-chat-fenetre-conversation-1

coment je peut lui dire

car j'ai tester 

 <script>
$(document).ready(function(){
    $(".icon-mini-chat-supprimer").click(function(){
        $(".mini-chat-fenetre-conversation-2").hide();
    });
});
</script>

ca ne veux pas le remplacer la class

merci

5 réponses

  1.
    jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 831
     
    Bonjour,

    Je n'ai rien compris à tes explications....
    Déjà, que veux dire pour toi : "mais le souci c'est que ce cadre ne suite pas " ?

    De plus, pour pouvoir bien comprendre comment sont organisés tes "cadres" sur ta page... il nous faudrait le code html COMPLET !

    Ensuite... attention avec ton code : 
    $(document).ready(function(){
    $(".icon-mini-chat-supprimer").click(function(){
        $(".mini-chat-fenetre-info").hide();
    });
});

    Là .. tu lui dis que : Si tu clique sur un des tes boutons "fermer" (peu importe lequel .... ) ... tu dois Masquer TOUS les éléments ayant la clas "mini-chat-fenetre-info" ... et pas seulement celui qui se trouve à côté !
    Pour y remedier tu vas devoir utiliser d'autres selecteurs.
    Comme $(this).parent() par exemple
    En voici la liste : https://api.jquery.com/category/selectors/

    0
  2. denis
     
    voilà le code html 

    
      <div class="mini-chat-conversation">
	  <div class="mini-chat-salon-gauche">
	                                       <p class="mini-chat-fenetre-info">Ne communique jamais tes coordonnétes personnelles (nom, addresse, n° de téléphone...), ni tes identifiants.<span class="icon-mini-chat-supprimer" title="supprimer"></span></p>
										   <p class="mini-chat-fenetre-message">age, ville(75), ici pour une relation serieuse du membre</p>
										   <p class="mini-chat-fenetre-conversation">mon texte</p>
										   <div class="mini-chat-zone-avatar-pseudo-texte">
										                                                   <div class="mini-chat-zone-avatar-pseudo">
																						   
																						   <div><figure class="portrait-mini-chat-zone"><span class="icon-avatar-mini-chat-moyen-homme" title="avatar home"></span></figure></div>
																						   <p>mon pseudo</p>
																						   
																						   </div>
																						   
																						   <div class="mini-chat-zone-texte"><div>select</div><div>input</div></div></div>
										   
	  </div>
	  <div class="mini-chat-salon-droite">
	                                      <p class="mini-chat-nombre-connecter-totaliter">800 Connecté</p>
	                                      <p class="mini-chat-nombre-connecter-totaliter">400 hommes et 400 femmes</p>
	                                      <div class="mini-chat-membre-connecter">robot</div>
										  <div class="mini-chat-button-statut">Statut : </div>
	  </div>
	  </div>


    et le code css 

    /*************************Début Des mini chat salons & membre********************************************/

      .mini-chat-conversation
	  {
	  height: calc(100% - -1em);
/*	  background-color:#0000CC;*/
	  }

	  .mini-chat-salon-gauche, .mini-chat-salon-droite
	  {
	  float:left;
	  height: calc(100% - 0em);
	  }

      .mini-chat-salon-gauche
	  {
	  width:110em;
/*	  background-color:#FF3366;*/
	  overflow-y:scroll;
	  }
	  
	  .mini-chat-salon-droite
	  {
	  width:36.5em;
/*	  background-color:#9966FF;*/
      border-left:#CCCCCC 1px solid;
	  overflow-y:scroll;
	  }

	  
	  .mini-chat-salon-gauche > .contenu
	  {
	  height: calc(100% - 0em);
/*	  overflow-y:scroll;*/
	  }
	  
	  
	  .mini-chat-salon-droite > .contenu
	  {
	  height: calc(100% - 0em);
/*	  overflow-y:scroll;*/
	  }

/*************************Fin Des mini chat salons & membre********************************************/
/*************************D�but Des mini chat cadre fen�tre message & info*******************************/

	  .mini-chat-fenetre-conversation
	  {
	  height: calc(100% - 13.1em);
	  overflow-y:scroll;
	  margin:0;
	  }
/*************************Fin Des mini chat cadre fen�tre message & info*******************************/
/*************************Début Des mini chat zone avatar & zone texte***********************************/
      .mini-chat-zone-avatar-pseudo-texte
	  {
/*	  height: calc(100% - 0em);*/
/*	  background-color:#0000CC;*/
	  border-top:#CCCCCC 1px solid;
/*	  border-bottom:#CCCCCC 1px solid;*/
	  }

	  .mini-chat-zone-avatar-pseudo, .mini-chat-zone-texte
	  {
	  float:left;
	  height: calc(100% - 0em);
	  }

      .mini-chat-zone-avatar-pseudo
	  {
	  width:8em;
/*	  background-color:#FF3366;*/
/*	  overflow-y:scroll;*/
	  }
      .mini-chat-zone-avatar-pseudo div
	  {
	  margin:0;
	  }
      .mini-chat-zone-avatar-pseudo p
	  {
      border-top:#CCCCCC 1px solid;
	  margin:0;
	  }
	  .mini-chat-zone-texte
	  {
	  width:100.6em;
/*	  background-color:#9966FF;*/
      border-left:#CCCCCC 1px solid;
/*	  overflow-y:scroll;*/
	  }
	  .mini-chat-zone-texte div
	  {
	  padding:1em;
	  }
	  .mini-chat-zone-texte div + div
	  {
      border-top:#CCCCCC 1px solid;
	  }
/*************************Fin Des mini chat zone avatar & zone texte***********************************/
/*************************Début Des mini chat cadre fenétre message & info*******************************/

      .mini-chat-fenetre-message
	  {
/*	  height: calc(8% - 0em);*/
/*	  border-top:#CCCCCC 1px solid;*/
	  border-bottom:#CCCCCC 1px solid;
/*	  background-color:#00FF00;*/
	  margin:0;
/*	  overflow-y:scroll;*/
	  }
	  
	  .mini-chat-fenetre-info
	  {
/*	  height: calc(8% - 0em);*/
/*	  border-top:#CCCCCC 1px solid;*/
	  border-bottom:#CCCCCC 1px solid;
/*	  background-color:#00FF00;*/
	  margin:0;
/*	  overflow-y:scroll;*/
	  }

/*************************Fin Des mini chat cadre fen�tre message & info*******************************/


    là c'est tout est ok

    mais si un membre veut fermer ce cadre 

    <p class="mini-chat-fenetre-info">Ne communique jamais tes coordonnétes personnelles (nom, addresse, n° de téléphone...), ni tes identifiants.<span class="icon-mini-chat-supprimer" title="supprimer"></span></p>

    il pourra s'il clique sur

    <span class="icon-mini-chat-supprimer" title="supprimer"></span>

    jusqu'a là ca fonctione

    mais le souci si il clique ca ferme bien le cadre
    mais il faudra modifier une class qui sera 

    <p class="mini-chat-fenetre-conversation">mon texte</p>


    en remplacant par

    <p class="mini-chat-fenetre-conversation-2">mon texte</p>

    car je modifira juste la hauteur 

    	  .mini-chat-fenetre-conversation
	  {
	  height: calc(100% - 13.1em);
	  overflow-y:scroll;
	  margin:0;
	  }


    par 

    	  .mini-chat-fenetre-conversatio-2
	  {
	  height: calc(100% - 16.5em);
	  overflow-y:scroll;
	  margin:0;
	  }


    il faudra quand on clique pour fermer le cadre info ca va metre automatique mini-chat-fenetre-conversatio-2
    0
  3. denis
     
    up
    0
    1. denis
       
      up svp
      0
    2. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 831
       
      il faudra quand on clique pour fermer le cadre info ca va metre automatique mini-chat-fenetre-conversatio-2

      Tu me répètes la même chose... alors que moi je voudrais que tu reformule autrement...car je ne comprend toujours pas !
      Que signifie "ca va mettre" pour toi ???
      Ca remplace ?
      Ca se met en dessous ?
      Ca l'affiche ?
      Ca le déplace à côté ?
      ????????????

      NB: Pas la peine de faire des "up" . Ca a tendance à me freiner dans mon envie de répondre......
      0
  4. denis
     
    voilà un exemple 

    
<p class="mini-chat-fenetre-info">ce cadre il apparait quand tu actualises la page <span class="icon-mini-chat-supprimer" title="supprimer"></span></p>

<div class="mini-chat-fenetre-conversation1 mini-chat-fenetre-conversation2">là c'est un cadre avec une hauteur de 10em car là il prend la class mini-chat-fenetre-conversation1</div>
<p class="mini-chat-formulaire">là c'est un cadre qui esty en bas </p>

    avec le css 

    	  .mini-chat-fenetre-info
	  {
	  border:#CCCCCC 1px solid;
	  }
	  .mini-chat-fenetre-conversation1
	  {
	  height:10em;
	  	  border:#CCCCCC 1px solid;

	  }
.mini-chat-formulaire
	  {
	  height:10em;
	  	  border:#CCCCCC 1px solid;

	  }


    qd tu vas masquer ou supprimer le cadre mini-chat-fenetre-info grace a ce span <span class="icon-mini-chat-supprimer" title="supprimer"></span>

    aavec ce code que j'ai mis afin de supprimer ou masqué 

    <script>
$(document).ready(function(){
    $(".icon-mini-chat-supprimer").click(function(){
        $(".mini-chat-fenetre-info").hide();
    });
});
</script>


    on auras ce nouveau code html css sans le cadre <p class="mini-chat-fenetre-info">ce cadre il apparait quand tu actualises la page <span class="icon-mini-chat-supprimer" title="supprimer"></span></p> 

    <div class="mini-chat-fenetre-conversation1 mini-chat-fenetre-conversation2">là c'est un cadre avec une hauteur de 15em car là il prend la class mini-chat-fenetre-conversation2</div>
<p class="mini-chat-formulaire">là c'est un cadre qui esty en bas </p>


    //là o vas changer juste la taile de la hauteur de la fenetre 

 .mini-chat-fenetre-conversation2
	  {
	  height:15em;
	  	  border:#CCCCCC 1px solid;

	  }
.mini-chat-formulaire
	  {
	  height:10em;
	  	  border:#CCCCCC 1px solid;

	  }


    donc il faudra un code qui permet d'avoir une class mini-chat-fenetre-conversation1 et dés qu'on suprime le cadre fenetre info ça remplace le cadre mini-chat-fenetre-conversation1 par mini-chat-fenetre-conversation2 afin juste changer la hauteur

    merci
    0
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 831
       
      Déjà ... tu ne mets qu'une class par cadre (dans ton cas actuel) et non pas les deux.
      donc soit : 
      class="mini-chat-fenetre-conversation1"

      soit 
      class="mini-chat-fenetre-conversation2"


      Ensuite, tu créés ton second cadre (celui contenant la class mini-chat-fenetre-conversation2 ) que tu laisses en "display:non" pour qu'il n'apparaisse pas à l'écran.
      Et enfin, lorsque tu "fermes" le cadre mini-chat-fenetre-conversation1 ... tu fais un show() du cadre mini-chat-fenetre-conversation2
      0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. denis
     
    	  .mini-chat-fenetre-conversation1
	  {
	  height: calc(100% - 16.5em);
	  overflow-y: auto;
	  margin:0;
	  position:relative;
	  }
	  .mini-chat-fenetre-conversation2
	  {
	  display:none;
	  height: calc(100% - 18.5em);
	  overflow-y: auto;
	  margin:0;
	  position:relative;
	  }



    										   <p class="mini-chat-fenetre-conversation1">mon texte</p>
										   <p class="mini-chat-fenetre-conversation2">mon texte</p>



    $(".mini-chat-fenetre-conversation2").css("display", "none");
$(".mini-chat-fenetre-conversation1").css("display", "block");


    un truc de ce style ou pas

    merci
    0
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 831
       
      En JS...
      Donc dans ta fonction 
      <script>
$(document).ready(function(){
    $(".icon-mini-chat-supprimer").click(function(){
        $(".mini-chat-fenetre-info").hide();
    });
});
</script>

      tu ajoutes l'affichage du second bloque
      Par exemple : 
      <script>
$(document).ready(function(){
    $(".icon-mini-chat-supprimer").click(function(){
        $(".mini-chat-fenetre-info").hide();
        $(".mini-chat-fenetre-conversation1").hide();
        $(".mini-chat-fenetre-conversation2").show();
    });
});
</script>


      Mais.... si en réalité le cadre est le même pour les deux (je parles du contenu... le text à l'intérieur...).. à ce moment là il suffit juste de changer la class DANS le cadre.
      Tu peux alors utiliser un Toggle par exemple
      https://api.jquery.com/toggleclass/
      un truc du genre : 
       $(".mini-chat-fenetre-conversation1").toggleClass("mini-chat-fenetre-conversation1 mini-chat-fenetre-conversation2");
      0
    2. denis
       
      merci ca marche 

      $(document).ready(function(){
    $(".icon-mini-chat-supprimer").click(function(){
        $(".mini-chat-fenetre-info").hide();
        $(".mini-chat-fenetre-conversation1").hide();
        $(".mini-chat-fenetre-conversation2").show();
    });
});


      mais le contenu n'est pas pareil hors il devrait

      donc j'ai tester de mettre 

      $(".mini-chat-fenetre-conversation1").toggleClass("mini-chat-fenetre-conversation1 mini-chat-fenetre-conversation2");


      ca ne marche
      en attendant ta réponse je vais y reflechir ;)
      0
    3. denis
       
      up merci
      0
    4. denis
       
      c'est bon j'ai trouvé ca marché
      0

Discussions similaires

Code source couleur de fond
Mehdi-Amg -
Techno01 -

9 réponses
Changer la couleur de fond des pages web
Laylomi -
dadwu -

22 réponses
Comment faire le signe au carré ² sur iPhone ?
Chloe0007 -
Jaks- -

5 réponses