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
A voir également:

5 réponses

Réponse 1 / 5
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 2 / 5
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
Réponse 3 / 5
denis
 
up
0
denis
 
up svp
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 4 / 5
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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

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

Posez votre question
Réponse 5 / 5
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
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
denis
 
up merci
0
denis
 
c'est bon j'ai trouvé ca marché
0

Discussions similaires

Comment retrouver les noms des élèves de ma classe si je ne m'en souvient pas ,
anonyme -
anonyme -

2 réponses
Code source couleur de fond
Mehdi-Amg -
Techno01 -

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

22 réponses