Comment créer un “réutilisables” fonction jquery?

J'ai ce bout de code qui fonctionne très bien:

function displayVals() {
    var phonevals = $("#bphonesel").val();
    $('#bphone').val(phonevals);
}

$("select").change(displayVals);
displayVals();

Je veux être en mesure de les réutiliser pour toutes les autres boîtes que j'ai sur mon site. Donc, je pensais utiliser des paramètres pour le faire. Cependant, je n'ai jusqu'à présent pas été en mesure d'obtenir la syntaxe correcte. Voici ce que j'ai, mais ça ne fonctionne pas. Toute aide serait appréciée.

function displayVals(inputfld, boundfld) {
    var nvenval = $(inputfld).val();
    $(boundfld).val(nvenval);
}

$("select").change(displayVals());
displayVals('#bphonesel', '#bphone');
InformationsquelleAutor I_miss_Steve_already | 2011-11-24
  1. 9
    $.fn.displayVals = function(inputfld, boundfld) {
    this.change(function() {
        var nvenval = $(inputfld).val();
        $(boundfld).val(nvenval);
    }
}

$("select").displayVals();

    Découvrez la jQuery docs sur la création de plugins pour plus d'info.

    • this fonctionnera très bien - pas besoin d'utiliser $(this).
    • ta, mis à jour
    InformationsquelleAutor Chris Fulstow
  2. 4

    Comme cela si vous voulais faire une fonction jQuery:

    $.fn.displayVals = function() {
//Function stuff goes here
});

$('#element').displayVals()

    L'intérieur de la fonction, $(this) fonctionne exactement comme vous vous y attendez. Il suffit de définir ce en dehors de la docReady et vous êtes tous ensemble. Cela dit, il semble que vous juste besoin de définir les sélecteurs dans les displayVals() appeler à l'intérieur de l' .événement de changement:

    $("select").change(displayVals('#bphonesel','#bphone'));

    Autre que cela, il faudrait que je vois le reste de votre code pour comprendre ce qui pourrait être la cause du problème.

    • Vous ne devriez pas utiliser $(this) à l'intérieur d'une fonction jQuery, this est déjà un objet étendu.
    • Whoopsie. Vous avez raison 🙂 Chris Fulstow la réponse ci-dessous est beaucoup mieux, de toute façon.
    • Il utilise $(this) trop 🙂
    InformationsquelleAutor jblock
  3. 0

    Je pourrais faire quelque chose comme:

        (function( $ ){
          $.fn.displayVals = function() {

            this.change(function() {
                var val = $(this).val();
                var elemid = $(this).attr("data-elem");
                if (elemid)
                    $("#" + elemid).html(val);
            });

          };
        })( jQuery );

    $(function () {
        $(".display-vals").displayVals();
    });

    Puis, sur tout sélectionner l'élément que vous voulez que cela fonctionne, vous pouvez faire quelque chose comme::

    <select class="display-vals" data-elem="val-div">
    <option>item 1</option>
    <option>item 2</option>
    <option>item 3</option>
</select>

<div id="val-div"></div>

    Cela utilise un html5 style "données" de l'attribut. Cela signifie également que vous n'avez pas à chacun de liste déroulante dans le document de la charge de l'événement, chaque sélectionnez pouvez spécifier son propre élément d'affichage en html.

    • Merci pour l'entrée. Je l'ai eu dans une autre partie du projet et n'ont pas été en mesure d'essayer ces suggestions, mais je vais très bientôt, et ensuite un rapport. :<)g
    InformationsquelleAutor obliojoe