Funktion Argumente als Text nicht funktioniert

Question

Dies ist mein erster Beitrag, also bitte nehmen Sie es mir einfach :)

Ich versuche, eine wiederverwendbare Funktion namens alertControls() zu erstellen. Ich versuche, die Argumente Bits zu machen, die ich in den HTML-Strings ersetzen kann, die in der Funktion aufgerufen werden, aber einen Fehler erhalte, wenn ich versuche, es so zu machen. Ich habe ein paar verschiedene Möglichkeiten ausprobiert, aber bin verwirrt, warum dies nicht in JS funktionieren würde:

function alertControls(parent, icon, alert, message) { 
    parent = "form-group has-warning has-feedback"; 
    icon = "warning-sign"; 
    alert = "warning"; 
    message = "Password too short"; 

    $(this).closest("div").removeClass(); 
    $('.alert').remove(); 
    $('span').not('.input-group-addon,.hidden-xs,.caret').remove(); 
    $(this).closest("div").addClass(parent); 
    $(this).before('<span class="glyphicon glyphicon-' + icon + 'form-control-feedback" aria-hidden="true"></span>'); 
    $(this).closest("div").append('<div class="alert alert-' + alert + ' alert-strong is-attached"><em class="glyphicon glyphicon-remove-sign"></em> <strong>' + message + '</strong></div>'); 
} 

Dann möchte ich mit unterschiedlichen Werten in der Funktion html wieder zu verwenden können:

alertControls("form-group has-error has-feedback", "error-sign", "error", "Not valid"); 

Viele Danke für jede Hilfe

Answer 1

Sie könnten den Elementselektoreinrichtung als zusätzliches Argument übergeben (es die erste machen):

function alertControls(selector, parent, icon, alert, message) { 
    // define default values, but only use them when no value supplied: 
    parent = parent || "form-group has-warning has-feedback"; 
    icon = icon || "warning-sign"; 
    alert = alert || "warning"; 
    message = message || "Password too short"; 

    // get element(s) for selector, and use that instead of `this` 
    var $elem = $(selector); 
    $elem.closest("div").removeClass(); 
    $('.alert').remove(); 
    $('span').not('.input-group-addon,.hidden-xs,.caret').remove(); 
    $elem.closest("div").addClass(parent); 
    $elem.before('<span class="glyphicon glyphicon-' + icon + 'form-control-feedback" aria-hidden="true"></span>'); 
    $elem.closest("div").append('<div class="alert alert-' + alert + ' alert-strong is-attached"><em class="glyphicon glyphicon-remove-sign"></em> <strong>' + message + '</strong></div>'); 
} 

nennen es wie folgt aus:

alertControls("input#test", "form-group has-error has-feedback", "error-sign", "error", "Not valid"); 

Sie könnten alternativ aussehen in einem jQuery-Plug-in, das Erstellen und dann würden Sie diese Syntax verwenden:

$("input#test").alertControls("form-group has-error has-feedback", "error-sign", "error", "Not valid"); 

Aber für diesen speziellen Fall glaube ich nicht, dass nützlich ist. jQuery-Plugins sollten keine Abhängigkeiten haben, wie Sie sie in Ihrem Code haben, wo erwartet wird, dass es ein Elternteil div und ein Element mit Klasse alert usw. gibt.

Answer 2

1. Sie weisen Parametern neue Werte zu. Wenn ich ein Problem verstanden habe, sollten Sie es ändern in:

message = message || "Password too short"; und so weiter.

2. Ihre Verwendung von this ist falsch. Vielleicht haben Sie ein anderes Attribut übergeben, sagen element und es statt $(this) verwenden, so wäre es:

   if ($('input#test').val() === "") { alertControls($('input#test'), "form-group has-error has-feedback", "error-sign", "error", "Not valid"); }

Answer 3

Was Sie tun:

function a(b){ 
b=1;//overides b 
return b; 
} 
a(5);//returns also 1 

außer Kraft setzen Sie den Wert ein. Tun Sie das einfach nicht. Wenn Sie einen Standardwert haben wollen, die verwendet wird, wenn kein Wert übergeben wird, können Sie neue ECMA6 Syntax:

function a(b=1){ 
return b; 
} 
a();//returns 1 
a(5); //returns 5 

---

Problem 2: „dieses“ kehrt das übergeordnete Objekt einer Funktion. Wenn Sie Ihre Funktion in js aufrufen, ist dies das Fensterobjekt.

function a(){ 
return this; 
} 
a(); //will return window 

So müssen Sie das Element eine andere Art und Weise zu bekommen, vielleicht ist es an die Funktion übergeben oder mit:

$("#uniqueselector")