2010-03-15 7 views
0

J'ai un formulaire HTML dans lequel je vais copier des valeurs d'une série de champs de saisie vers certaines plages/entêtes lorsque l'utilisateur remplit les champs de saisie. Je suis en mesure d'obtenir ce travail en utilisant le code suivant:Jquery passant un élément HTML dans une fonction

$('#source').keyup(function(){ 
    if($("#source").val().length == 0){ 
     $("#destinationTitle").text('Sample Title'); 
    }else{ 
     $("#destinationTitle").text($("#source").val()); 
    } 
    }); 

Dans le scénario ci-dessus le html est quelque chose comme:

Titre de l'échantillon

Fondamentalement, les utilisateurs se remplit à la source case, le texte de l'est changé à la valeur de l'entrée source. Si rien n'est entré ou si l'utilisateur supprime les valeurs saisies dans la boîte, un texte par défaut est placé dans le champ. Assez simple. Cependant, comme j'ai besoin de faire ce travail pour de nombreux champs différents, il est logique de transformer cela en une fonction générique, puis de lier cette fonction à l'événement onkeyup() de chaque. Mais j'ai quelques problèmes avec ça. Ma mise en œuvre:

function doStuff(source,target,defaultValue) { 

    if($(source).val().length == 0){ 
     $(target).text(defaultValue); 
    }else{ 
     $(target).text($(source).val()); 
    } 

} 

qui est appelé comme suit:

$('#source').keyup(function() { 
      doStuff(this, '"#destinationTitle"', 'SampleTitle'); 
    }); 

Ce que je ne peux pas comprendre comment passer le second paramètre, le nom de l'élément html de destination dans la fonction. Je n'ai aucun problème à passer dans l'élément auquel je suis lié par "this", mais je n'arrive pas à comprendre la syntaxe de l'élément de destination.

Toute aide serait appréciée - merci beaucoup!

Répondre

5

appel comme ceci:

$('#source').keyup(function() { 
     doStuff(this, '#destinationTitle', 'SampleTitle'); 
}); 

Il est juste une chaîne :)

Si l'élément est par rapport à l'autre cependant, vous pouvez le rendre générique, par exemple, si #destinationTitle est toujours le div suivant, la cellule du tableau suivant, etc ... toujours dans le même endroit relatif, vous pouvez le rendre plus propre pour tous les keybinds, si vous postez des exemples de balisage, je vous montrerai comment.

+0

Salut Nick, C'est ce que j'ai pensé, et j'ai essayé :) - mais comment puis-je le référencer dans ma fonction? Quand je fais ce qui suit, il ne semble pas fonctionner: fonction doStuff (source, cible, defaultValue) { si (. $ (Source) .val() Longueur == 0) {$ (cible) .text (defaultValue); } else { $ ("'" + cible + "'") .text ($ (source) .val()); } } – christian

+0

Pourquoi d'autres traitements spéciaux? il suffit de l'utiliser normalement 'else {$ (target) .text (..)' – Anurag

+0

@christian - Je ne sais pas quelle est la syntaxe sur l'autre là, il suffit d'utiliser comme Anurag a, pas d'autres ajouts à la chaîne. –

1

Débarrassez-vous des guillemets.

+1

voter pour l'autre réponse, il m'a battu –

+0

aah mon mauvais .. didn ' Je vois que vous étiez lent, lemme downvote vous maintenant! – Anurag

+0

lol, merci [caractères supplémentaires afin que je puisse publier ce commentaire] –

Questions connexes