Question

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

我想将值作为字符串发送，而不是表示整数例如 - 0 =＆＃34;冷冻＆＃34;，40 =＆＃34;酷＆＃34;，80 =＆＃34;温暖＆＃34;，120 =＆＃34;热＆＃34;

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

我认为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

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

您可以这样做：

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/

Answer 2

能够将新值传递给表单的解决方案在于使用与输入同名的隐藏字段。整数值被传递到隐藏字段，然后可以使用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

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

2 个答案: