J'essayais de comprendre comment afficher / masquer un élément (DIV) sur une page de manière dynamique sur la base d'un autre élément (DIV) existant.
J'ai une case à cocher sur la page qui reçoit une classe ajoutée lorsqu'il est cliqué sur. Le code ici est ce que je pensais que je voudrais. Mais cela cache juste l'élément quand .is-vérifié existe. Il ne recule pas à nouveau. J'ai déjà une case à cocher avec une classe appelée .Selectit et lorsque vous cliquez dessus, une classe est annexée appelée .is-vérifie < / p> J'aimerais que lorsque .is-vérifié obtenez-vous annexé sur la page qu'elle masque la classe .fn_container_start mais aussi lorsque .is-vérifié n'est pas sur la page, le .fn_container_start La classe doit être à nouveau cachée. Voici le HTML pour la case à cocher AVANT et après avoir cliqué sur après est-ce possible? Merci, Morten
5 Réponses :
Utilisez ce code
<script type="text/javascript">
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
$(".selectit").addClass("is-checked");
});
});
</script>
<label class="selectit"><input value="157" type="checkbox" name="download_category[]" id="in-download_category-157"> Brushes</label> <div class="fn_container_start">This div have .fn_container_start class</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Donc, je ne cherche pas à supprimer une classe. La case à cocher a déjà cette fonctionnalité. Je cherche seulement à cacher la classe .fn_container_start, qui est en dehors de la case à cocher
Ok a ajouté la classe CSS à ma feuille de style et essayé votre code. Mais cela ne semble pas fonctionner. Doit-il être spécifié qui que la classe à vérifier est-elle vérifiée? Ou est-ce qu'il regarde la page entière?
J'ai créé un chèque d'extraction à nouveau
Je pense que vous pouvez utiliser la méthode .HASCLASS
$( document ).ready(function() {
$("#in-download_category-157").click(function() {
$(".selectit").toggleClass("is-checked");
if($('.selectit').hasClass('is-checked')){
$('.fn_container_start').hide();
}else{
$('.fn_container_start').show();
}
});
});
Pour une raison quelconque, la bascule ne semble pas retirer la classe à nouveau. Donc, la div est cachée de manière permanente.
Désolé, il enlève la classe, mais le .fn_container_start div reste caché
Ah oui exactement!
Serait-ce correct? $ (document) .Ready (fonction (Fonction () {$ ("# in-download_category-157"). Cliquez sur (Fonction () {$ ("SELECTITE"). Tobgleclass ("Cochure"); Si ($ ( '. .selectit')
Oui Correct J'ai mis à jour le code aussi avec la condition de fonctionnement. Veuillez marquer cela comme réponse et uppote. Merci
<label class="selectit"><input value="157" type="checkbox" class="toggle_check" name="download_category" id="in-download_category-157" onchange="valueChanged();"> Brushes</label> <div class="fn_container_start"> <p class="hide">div hides if the checkbox checked</p> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
Est-ce possible si je n'ai pas accès au HTML d'origine. Donc, je ne peux que ajouter jQuery sur la page?
Ouais bien sûr .. mais prenez soin des cours.
Désolé je ne comprends pas, que veux-tu dire prendre soin des cours?
Je veux dire la référence utilisée pour sélectionner la case à cocher, ici dans mon exemple, j'ai utilisé la case 'Toggle_Check' pour sélectionner la case à cocher et la classe 'fn_container_start' est utilisée pour renvoyer le spectacle masquer div. J'espère que cela aura du sens
Le div .fn_container_start est en dehors de la case à cocher. C'est juste un élément de la page. Cela fonctionnera-t-il toujours?
Bien sûr, mec ... Travaillera.
Je ne sais pas comment le modifier, car le HTML que vous avez posté est différent de la mienne. Je ne peux pas réellement modifier le HTML
Seule la différence est dans la Div supplémentaire que j'ai ajoutée sous l'étiquette, qui est juste pour vous faire connaître la fonctionnalité de masquage de l'émission fonctionne bien et la deuxième différence est la fonction Onchange. Ceux-ci ne sont que des bases et je ne sais pas quelle section est vous déroutant t'es.
Le problème est que je ne peux pas modifier le code HTML d'origine. Donc je ne peux pas ajouter la valeur onchanange
J'ai créé un nouvel extrait et j'espère que cela vous aidera à vous aider
<label class="selectit"><input value="157" type="checkbox" class="toggle_check" name="download_category" id="in-download_category-157"> Brushes</label> <div class="fn_container_start"> <p class="hide">div hides if the checkbox checked</p> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>