Signaler

Classe 1 remplacer classe 2 en jquery ou autre [Résolu]

Posez votre question denis - Dernière réponse le 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>

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
Afficher la suite 
Utile
+0
moins plus
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/



Ajouter un commentaire
Utile
+0
moins plus
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
Ajouter un commentaire
Utile
+0
moins plus
jordane45 14627Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 28 septembre 2016 Dernière intervention - 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épondre
Ajouter un commentaire
Utile
+0
moins plus
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
jordane45 14627Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 28 septembre 2016 Dernière intervention - 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
Répondre
Ajouter un commentaire
Utile
+0
moins plus
	  .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 14627Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 28 septembre 2016 Dernière intervention - 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
http://api.jquery.com/toggleclass/
un truc du genre :
 $(".mini-chat-fenetre-conversation1").toggleClass("mini-chat-fenetre-conversation1 mini-chat-fenetre-conversation2");
Répondre
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 ;)
Répondre
denis- 14 sept. 2016 à 21:06
c'est bon j'ai trouvé ca marché
Répondre
Ajouter un commentaire

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !