J'ai cherché ces dernières heures pour comprendre pourquoi cela faisait disparaître le div. J'essaie de faire basculer la couleur d'arrière-plan en cliquant. Fondamentalement, je veux que l'arrière-plan soit plus sombre lorsqu'il est sélectionné, ce qui indique qu'il est sélectionné. Ensuite, après avoir été cliqué à nouveau, revenez à sa norme.
J'utilise jQuery 3.3.1
Voici un JSFiddle
HTML
$(document).on('click', '#readMailFunctionCellReply', function() {
$("#readMailFunctionCellReply").toggle(
function() {
$("#readMailFunctionCellReply").css("background-color:#ffedc5");
},
function() {
$("#readMailFunctionCellReply").css("background-color:");
}
);
})
CSS
#readMailFunctionCellReply{
justify-content: center;
padding-top:10px;
padding-bottom:5px;
text-align: center;
/* border: 1px solid #a45127; */
color:#a45127;
}
#readMailFunctionCellReply:hover{
cursor:pointer;
background-color: #ffedc5;
text-decoration: underline;
color:#a45127;
}
Javascript
<div id="readMailFunctionCellReply"><img src="images/reply.png" title="Reply" /><br>Reply</div>
Merci pour toute aide!
4 Réponses :
Utilisez toggleClass () au lieu de toggle () (et ajoutez une classe dans votre css):
CSS:
$('#readMailFunctionCellReply').click(function() {
$(this).toggleClass("selected");
})
JS:
$(document).on('click', '#readMailFunctionCellReply', function() {
$("#readMailFunctionCellReply").toggleClass("selected");
})
ou pour le JS:
#readMailFunctionCellReply{
justify-content: center;
padding-top:10px;
padding-bottom:5px;
text-align: center;
/* border: 1px solid #a45127; */
color:#a45127;
}
#readMailFunctionCellReply.selected{
background-color:#ffedc5;
}
#readMailFunctionCellReply:hover{
cursor:pointer;
background-color: #ffedc5;
text-decoration: underline;
color:#a45127;
}
La fonction toggle () change la propriété d'affichage (affiche ou masque les éléments correspondants). Consultez la documentation pour plus de détails.
En fonction de vos besoins, j'ai le code suivant pour vous.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="readMailFunctionCellReply"><img src="images/reply.png" title="Reply" /><br>Reply</div>
#readMailFunctionCellReply{
justify-content: center;
padding-top:10px;
padding-bottom:5px;
text-align: center;
/* border: 1px solid #a45127; */
color:#a45127;
}
#readMailFunctionCellReply:hover{
cursor:pointer;
background-color: #ffedc5;
text-decoration: underline;
color:#a45127;
}
.orangeBG {
background-color: #ffedc5;
}
$("#readMailFunctionCellReply").click(function(){
$("#readMailFunctionCellReply").toggleClass("orangeBG");
});
Génial, je n'ai pas pensé à ajouter une classe à cet effet. Merci.
Il peut être utile de mentionner ce que vous avez changé; quel était le problème et comment l'avez-vous résolu?
@showdev J'ai donc ajouté la classe .orangeBG au CSS et j'ai ajusté le Java à ce que @Sam avait répertorié dans sa réponse. Je me fais un devoir de ne pas appeler de sources externes, donc j'appelle déjà une copie de jquery-3.3.1.min.js localement.
Je suis heureux que le code fonctionne pour vous @Sabyre et je donnerai plus de description pour la réponse à l'avenir. Le but ultime était de rendre le code fonctionnel comme vous le vouliez et de le garder aussi propre que possible. J'ai donc utilisé toggleClass () à la place.
vous devez supprimer:
$("#readMailFunctionCellReply").toggle(function()
la fonction de bascule active la visibilité de l'élément, vous devez plutôt utiliser addClass ou toggleClass.
J'ai un violon fonctionnel :
Ce que vous recherchez n'est pas .toggle mais . toggleClass . Le premier fait basculer l'élément lui-même, le cachant et le montrant. Toggleclass, d'autre part, fait ce qu'il dit sur la boîte, il fait apparaître une classe css dans et hors de l'élément. Tout ce dont vous avez besoin est d'implémenter la classe CSS correspondante.
JS:
#readMailFunctionCellReply.selected{
background-color: pink;
}
CSS:
$(document).on('click', '#readMailFunctionCellReply', function() {
$("#readMailFunctionCellReply").toggleClass("selected");
});
JsFiddle, en utilisant du rose pour ajouter de la pizzaz: https://jsfiddle.net/6kswc9ug/