Abhängen von Informationen basierend auf Texteingabewert

Question

So habe ich ein Eingabefeld, das nur einen Dollar-Wert ausgenommen wird. Basierend auf dem Dollar-Wert möchte ich, dass ein div Informationen austauscht. Im Grunde muss ich also einem Inhalt einen Wertebereich zuordnen, basierend auf dem Eingabewert, und den Inhalt bei Unschärfe tauschen. Unten ist Code, der nicht funktioniert, aber irgendwie gibt Ihnen eine Idee, was ich zu erreichen versuche. Jede Hilfe wird geschätzt.

<input type="text" /> 

$(function(){ 

var low = 5 
    mid = 10 
    high = 15 
    val = $('input').val() 

if (val >= low && val < mid){ 
val.blur(function() { 
    val.append('<div>You cheapo!</div>'); 
}); 

} 

if (val >= mid && val < high){ 
val.blur(function() { 
    val.append('<div>You middle class folk!</div>'); 
}); 
} 

if (val >= high){ 
val.blur(function() { 
    val.append('<div>Woah baller!</div>'); 
}); 

} 

}); 

Answer 1

Zunächst müssen Sie, bis die blur Ereignis ausgelöst wird, warten, bevor die immer Wert des Eingangs val. Zweitens möchten Sie nur auf ein Unschärfen-Ereignis reagieren und dann Ihre Logik ausführen, also richten Sie das zuerst ein. Sobald Sie den Wert haben, können Sie Ihre Logik verwenden, um die text innerhalb eines anderen div zu setzen, anstatt einen neuen im laufenden Betrieb zu erstellen.

Dies ist, was ich denke, Sie Code wie zu arbeiten, um aussehen sollte:

$(function() { 
    var low = 5, 
     mid = 10, 
     high = 15; 

    function getText(val) { 
     if (val >= low && val < mid) 
      return 'You cheapo!' 
     else if (val >= mid && val < high) 
      return 'You middle class folk!' 
     else if (val >= high) 
      return 'Woah baller!' 
     else 
      return 'Out of range' 
    } 

    $('input').blur(function() { 
     var val = $(this).val(); 
     $('#target').text(getText(val)); 
    }); 
}); 

und hier ist ein Beispiel davon in Aktion:

DEMO:http://jsfiddle.net/marcuswhybrow/gKBUr/5/

Answer 2

Sie versuchen die .blur() Ereignis auf den Wert der Textbox zu binden. Binden Sie es an das Textfeld selbst.

So etwas wie

var obj = $("input"); 


obj.blur(function(){ 
    // do your code 
}); 

Und Sie können .before() oder .after() verwenden, um die div zu zeigen.

obj.after("<div/>"); 

Nicht getestet.

$(function() { 
    var low = 5; 
    var mid = 10; 
    var high = 15; 
    var inp = $('input'); 
    var val = inp.val(); 

    if (val >= low && val < mid) { 
     inp.blur(function() { 
      inp.after('<div>You cheapo!</div>'); 
     }); 
    } 

    if (val >= mid && val < high) { 
     inp.blur(function() { 
      inp.after('<div>You middle class folk!</div>'); 
     }); 
    } 

    if (val >= high) { 
     inp.blur(function() { 
      inp.after('<div>Woah baller!</div>'); 
     }); 
    } 
}); 

Answer 3

Nicht wirklich sicher, wo Sie anfangen, andere zu helfen, als zeigen, wie es getan werden könnte ...

$('input').blur(function() { 
    var low = 5; 
    var mid = 10; 
    var high = 15; 
    var val = $(this).val(); 

    if (val >= low && val < mid){ 
     $('#div-you-want-it-to-appear-in').html('<div>You middle class folk!</div>'); 
    } 

    if (val >= mid && val < high){ 
     $('#div-you-want-it-to-appear-in').html('<div>You middle class folk!</div>'); 
    } 

    if (val >= high){ 
     $('#div-you-want-it-to-appear-in').html('<div>You middle class folk!</div>'); 
    } 

});