如何将范围输入的值从整数更改为字符串？

Question

我有一个输入范围的表单-
<input id="slider" type="range" min="0" max="120" step="40" val="40">

我想将值作为字符串发送，而不是表示整数。
例如- 0 =“冷冻”，40 =“凉爽”，80 =“温暖”，120 =“热”

这对收件人来说更有意义。如何在传递值之前将整数换成单词？

我认为 jQuery if 语句可能会起作用 -

$("#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())
});

我知道我的代码是错误的，因此非常感谢任何清理逻辑/语法的帮助，假设它是可能的？

Answer 1

能够将新值传递给表单的解决方案在于使用与输入同名的隐藏字段。 整数值被传递到隐藏字段中，然后可以使用 jQuery 将值更改为字符串。

我将隐藏输入的初始值设置为拇指的默认起始值​​。 这样，如果用户确定默认条目是正确的并且他们不更改它，它仍然会将值发送到表单。

我还添加了一个 console.log()，这样我就可以检查该值是否正确传递，而不仅仅是显示在标签中。

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());

});

在 jsfiddle 中查看 https://jsfiddle.net/webmasterWannabee/gyv4rgws/#&togetherjs=dOh4uHa3MS

Answer 2

我认为输入范围值仅适用于数字而不是您想要的字符串，但您可以在范围滑块旁边的标签中显示温度值。这样，用户将滑动滑块并在更改滑块时看到您的温度值之一。

你可以这样做：

HTML：

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

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

然后是你的 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);
});

这是一个 jsfiddle 来演示它是如何工作的： https://jsfiddle.net/vsf42kej/1/