Wie kann ich den Wert eines Eingabebereichs von einer Ganzzahl in eine Zeichenfolge ändern?

Question

Ich habe ein Formular mit einer Reihe Input-
<input id="slider" type="range" min="0" max="120" step="40" val="40">

Statt darstellen ganze Zahlen I den Wert als String gesendet werden soll.
zB 0 = "Gefrieren", 40 = "Kühlen", 80 = "Warm", 120 = "Heiss"

Dies wird für den Empfänger sinnvoller. Wie kann ich eine Ganzzahl für ein Wort austauschen, bevor der Wert übergeben wird?

dachte ich eine jQuery if-Anweisung

$("#slider").change(function(){ 
    if('this').val(0) { 
    $('#slider').val("freezing") 
    } 
    else if('this').val(40) { 
    $('#slider').val("cool") 
    } 
    else if('this').val(80) { 
    $('#slider').val("warm") 
    } 
    else if('this').val(120) { 
    $('#slider').val("hot") 
    } 
console.log($('#slider').val()) 
}); 

Werk vielleicht weiß ich meinen Code falsch ist, so dass jede Hilfe die Logik/Syntax Reinigung ist sehr willkommen, vorausgesetzt, es ist möglich?

Answer 1

Die Lösung in der Lage zu sein, zu bestehen Der neue Wert bis zum Formular besteht darin, ein verstecktes Feld mit demselben Namen wie die Eingabe zu verwenden. Der Ganzzahlwert wird in das ausgeblendete Feld übergeben, wo der Wert dann mit jQuery in eine Zeichenfolge geändert werden kann.

Ich setze den Anfangswert der versteckten Eingabe auf den Standard-Startwert des Daumens. Wenn der Benutzer auf diese Weise entscheidet, dass der Standardeintrag korrekt ist und ihn nicht ändert, sendet er den Wert immer noch an das Formular.

Ich habe auch eine console.log() hinzugefügt, damit ich überprüfen konnte, ob der Wert korrekt übergeben wurde und nicht nur in der Beschriftung.

html

<input id="bar" name="temperature" type="range" min="0" max="120" step="80" val="40"/> 

<input id="slider" type="hidden" name="temperature" value="Warm" /> 

<label id="labelTemp">Warm</label> 

jQuery

$("#bar").change(function() { 

var value = $(this).val(); 

if (value == 0) { 
    $("#slider").val("Freezing"); 
} 
    else if (value == 40) { 
    $("#slider").val("Cool"); 
} 
    else if (value == 80) { 
    $("#slider").val("Warm"); 
} 
    else if (value == 120) { 
    $("#slider").val("Hot"); 
} 

$("#labelTemp").text($("#slider").val()); 

console.log($("#slider").val()); 

}); 

Blick in jsfiddle https://jsfiddle.net/webmasterWannabee/gyv4rgws/#&togetherjs=dOh4uHa3MS

Answer 2

Ich denke, der Eingabebereichswert funktioniert nur mit einer Zahl und nicht den gewünschten Zeichenfolgen, aber Sie können Ihre Temperaturwerte in einem Etikett neben Ihrem Bereichsschieberegler anzeigen. Auf diese Weise wird der Benutzer den Schieberegler verschieben und einen Ihrer Temperaturwerte sehen, wenn sie den Schieberegler ändern.

können Sie tun dies wie:

HTML:

<input id="slider" type="range" step="40" val="40" min="0" max="120"></input> 

<label id="labelTemp"></label> 

Dann wird Ihr JavaScript/jQuery:

$("#slider").change(function(){ 
    var s = ""; 
    var value = $(this).val(); 

    if(value == 0){ 
     s = "Freezing"; 
    } 
    else if(value == 40){ 
     s = "Cool"; 
    } 
    else if(value == 80){ 
     s = "Warm"; 
    } 
    else if(value == 120){ 
     s = "Hot"; 
    } 

    $("#labelTemp").text(s); 
}); 

Hier ist ein jsfiddle zu zeigen, wie es funktionieren würde: https://jsfiddle.net/vsf42kej/1/