jQuery Girl
  1. jQuery Girl
  3. Afficher et masquer div sur cliquant sur le bouton d’image ou de la radio
Intereting Posts
Comment déterminer quel object de canvas a d’abord complété son animation à vitesse aléatoire Comment modifier mon info-bulle sur un td connectez-vous à asp.net core signalR server à partir d’un client javascript Menu accordéon jQuery – garder le menu accordéon ouvert à la page sur laquelle je suis Jquery Mobile: Changer dynamicment le texte de l’en-tête d’un div repliable? Formulaire ne soumettant pas d’entrées générées dynamicment (jQuery) Champ jquery autocomplete auto fill avec la 1ère valeur et la partie ajoutée en surbrillance JS hasAtsortingbute avec la valeur d’atsortingbut de données L’en-tête change au fur et à mesure que vous faites défiler (jQuery) Un problème dans l’appel ajax pour les fichiers locaux? Ajouter des données JSON à la demande POST ckeditor: “a n’est pas défini” Inverser la barre de progression en utilisant CSS3 Case à cocher AJAX rails utilisant javascript .submit () jQuery ajax valider captcha

Afficher et masquer div sur cliquant sur le bouton d’image ou de la radio

J’ai plusieurs images et leur bouton radio respectif. En cliquant sur une image ou un bouton radio en leur div afficher et masquer respectifs affiche.

Mais je ne suis pas en mesure de réaliser:

  1. En cliquant sur l’image le bouton radio respectif doit également sélectionner (une valeur true) lorsque le texte montre

  2. Lorsque le texte se cache alors le bouton radio doit avoir une valeur fausse.

J’ai le code jusqu’à présent comme suit:

HTML 

 
 Flower 1
 
 Flower is pink. 
 
 
  
 Flower 2
 
 Flower is orange.

Code JavaScript 

 function Show_Div(Div_id) { if (false == $(Div_id).is(':visible')) { $(Div_id).show(250); } else { $(Div_id).hide(250); } }

La radio est l’enfant du précédent élément adjacent. 

 function Show_Div(Div_id) { if (!$(Div_id).is(':visible')) { $(Div_id).prev().children().prop('checked', true); $(Div_id).show(250); } else { $(Div_id).prev().children().prop('checked', false); $(Div_id).hide(250); } }

  1. .prev() sélectionne l’élément

    qui précède l’image

  2. .children() sélectionne l’élément enfant (ie le bouton radio dans ce cas)

Si vous ajoutez des éléments supplémentaires à

vous devrez probablement append des sélecteurs supplémentaires (ex first (), filter ()) pour accéder à l’élément en entrée.

L’avantage de cette approche est …

Vous n’avez pas besoin d’append d’autres balises #id à votre code. Donc, si vous envisagez de répéter ce schéma, vous aurez un détail en moins à vous préoccuper.

Transmettez l’identifiant en tant que chaîne plutôt qu’en tant qu’object HTML. Utilisez les boutons radio Identifiant pour définir / annuler la définition de leurs valeurs. Pour définir un bouton radio en une seule fois et afficher le div correspondant, append une classe pour les boutons div et radio, masquer le div et définir la radio sur false sur la première ligne de la fonction Show_Div. 

 body { padding: 5px; } label { font-weight: bold; } input[type=text] { width: 20em } p { margin: 1em 0 0; } 
     
  Flower 1
  
 
  
  Flower 2

Obtenez l’identifiant div en l’atsortingbuant comme titre à la radio correspondante et utilisez la bascule. 

 $("a").click(function(event) { $(this).find('input[type="radio"]').prop("checked", true); $('input[type="radio"]').change(); }); $('input[name="group"]').change(function() { var divId = $(this).attr('title'); $('#'+divId).toggle($(this).is(":checked")); });

Voici le code

Ajoutez un guillemet simple lorsque vous passez une chaîne à une fonction. Vous pouvez essayer comme:

HTML 

  Flower 1

JavaScript 

 function Show_Div(Div_id) { $('#'+Div_id).toggle(250); }

Essayez le code ci-dessous. 

   
 Flower 1
  
 
  
 Flower 2