Classe 1 remplacer classe 2 en jquery ou autre

Résolu/Fermé

denis - 9 sept. 2016 à 18:24
denis - 14 sept. 2016 à 21:06

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>

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

ensuite imaginer qd je clique sur le 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:

Classe 1 remplacer classe 2 en jquery ou autre
Remplacer disque dur par ssd - Guide
Remplacer un mot par un autre word - Guide
Word numéro de page 1/2 - Guide
2 comptes whatsapp - Guide
Retrouver la liste des élèves d'une classe - Forum Réseaux sociaux

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
9 sept. 2016 à 20:27

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/

Réponse 2 / 5

denis
9 sept. 2016 à 20:50

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



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

mon texte

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

Réponse 3 / 5

denis
12 sept. 2016 à 15:54

denis
12 sept. 2016 à 22:54

up svp

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
13 sept. 2016 à 09:44

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......

Réponse 4 / 5

denis
13 sept. 2016 à 10:25

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 

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 ce cadre il apparait quand tu actualises la page

<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

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
13 sept. 2016 à 10:42

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

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

Posez votre question

Réponse 5 / 5

denis
13 sept. 2016 à 12:14

	  .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

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
13 sept. 2016 à 12:24

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");

denis
13 sept. 2016 à 13:03

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 ;)

denis
14 sept. 2016 à 20:54

up merci

denis
14 sept. 2016 à 21:06

c'est bon j'ai trouvé ca marché

Discussions similaires

Comment retrouver sa photo de classe ?

Ou peut-on retrouver d'anciennes photos d'école et d'anciens élèves ?

Photos de classe sur les RS et sur Internet

Comment savoir sa classe en avance, avant la rentrée ?

comment retrouver une photo de classe ...

Discussions similaires

Newsletters