Javascript Girl
  1. Javascript Girl
  3. Création d'une fonction jQuery réutilisable
Intereting Posts
Comment envoyer une chaîne de Java à JavaScript sur un réseau? Les fonctions sont-elles valides pour les propriétés d'objet javascript? Portée variable dans j3 d3 Inclure JavaScript en ligne avec Brackets Curly {} dans XSL Comment puis-je concatérer des littératures regex en JavaScript? Comment puis-je créer un objet vide d'espace vide sans écraser un autre objet portant le même nom? Ajax, javascript envoyez une variable à une autre page, cliquez sur Le chargement de l'animation ne s'affiche qu'après l'achèvement de l'appel ajax dans Safari / Chrome Comment manipuler les transformées de traduction sur un élément SVG avec javascript en chrome? Comment soumettre un formulaire lorsque vous appuyez sur la touche de retour? Comment vérifier si deux dates ne sont pas le même jour calendaire TOT de la somme pour la colonne Modification document.location.hash sans page défilement Utilisation de CefSharp.Offscreen pour récupérer une page Web nécessitant un rendu de Javascript Coordonnées d'écran d'un élément, via Javascript

Création d'une fonction jQuery réutilisable

Au lieu de réécrire un bloc massif de code à chaque fois, j'essaie d'intégrer des fonctions dans mon travail mais j'ai du mal à le faire fonctionner.

Fondamentalement, j'ai une sélection de boutons radio et j'effectue des trucs chaque fois qu'un bouton radio est cliqué. (Je suis en train de charger un iFrame). Cependant, je dois rendre le iFrame SRC différent pour chaque bouton radio, alors, comment puis-je répondre à cela dans la fonction?

La fonction: 

jQuery.fn.switchPreview = function () { $('.liveDemoFrame').remove(); $('.liveDemoHand').append('<iframe class="liveDemoFrame" src="themes/src/' + themeName + '/" width="100%" height="300" scrolling="no"><p>Your browser does not support iframes.</p></iframe>'); $('.liveDemoHand').append('<div class="switchPreview"><div class="loadingPreview"></div></div>'); $('.liveDemoFrame').load(function() { $('.switchPreview').fadeOut(); $('.switchPreview').remove(); $('.liveDemoFrame').fadeIn(); }); return this; }

Dans iFrame SRC, j'ai une variable appelée themeName. J'ai besoin de cela pour changer de façon pour chaque bouton radio. Vous pouvez voir dans le code qui appelle la fonction que j'ai essayé de déclarer la variable à chaque fois, mais cela me donne toujours une erreur indéfinie.

Le code qui l'appelle: 

 $('#cTheme1').click(function () { $('input:radio[name=mgChooseTheme]:nth(1)').attr('checked',true); var themeName = 'theme1'; $('.liveDemoFrame').switchPreview(); }); $('#cTheme2').click(function () { $('input:radio[name=mgChooseTheme]:nth(2)').attr('checked',true); var themeName = 'theme2'; $('.liveDemoFrame').switchPreview(); }); $('#cTheme3').click(function () { $('input:radio[name=mgChooseTheme]:nth(3)').attr('checked',true); var themeName = 'theme3'; $('.liveDemoFrame').switchPreview(); });

Je suis sûr que c'est quelque chose de très simple, mais j'apprends toujours si peu de choses me font toujours sortir!

Passez le themeName comme argument de la fonction switchPreview.

-Couper la première ligne de la fonction à: 

 jQuery.fn.switchPreview = function (themeName) {

-Pour chacune des trois fois que vous appelez la fonction, assurez-vous de passer dans l'argument, c'est-à-dire: 

 $('.liveDemoFrame').switchPreview(themeName);

Pourquoi ne pas simplement mettre à jour la balise src de l'iframe … 

 $('#cTheme1').click(function () { $('input:radio[name=mgChooseTheme]:nth(1)').attr('checked',true); $('#liveDemoFrame').attr('src', <the new url>); });

Alors votre iframe devrait déjà faire partie de la page: 

 <iframe id='liveDemoFrame' src='<default page>'></iframe>

Je remarque que vous utilisez un attribut CLASS sur votre iFrame et que vous l'accédez en utilisant cela – vous avez vraiment besoin de réfléchir à l'utilisation de l'attribut ID si vous voulez simplement vous référer à un seul objet. (Comme dans mon exemple ci-dessus)