如何將範圍輸入的值從整數更改爲字符串？

我有一個範圍的表單輸入 -
<input id="slider" type="range" min="0" max="120" step="40" val="40">如何將範圍輸入的值從整數更改爲字符串？

而是代表整數我想要發送的值作爲一個字符串。
eg- 0 =「freeze」，40 =「cool」，80 =「warm」，120 =「hot」

這對收件人來說更有意義。如何在傳遞值之前交換一個字的整數？

我想一個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()) 
});

我知道我的代碼是錯誤的，所以任何幫助清理邏輯/語法是非常讚賞，假設它是可能的嗎？

來源

2017-01-06 webmasterWannabee

'$視圖（ '＃滑塊'）。VAL（）+ '''是一個整潔的小黑客來改變任何類型（非常多）通過將字符串連接到字符串。 –

我覺得它像[this]（https://jsfiddle.net/k1g88s5m/1/）？ – KiRa

謝謝。要confim- 我應該將 $（'＃slider'）。val（「cool」）更改爲$（'＃slider'）。val（）+'cool'？雖然現在技術上的價值不是'40cool'嗎？在我的形式中，整數將毫無意義，所以我想避免用戶或收件人看到它們。 – webmasterWannabee

能夠通過的解決方案新形式的價值在於使用與輸入名稱相同的隱藏字段。整數值被傳遞到隱藏字段中，然後可以使用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

來源

2017-01-12 06:42:36 webmasterWannabee

我認爲輸入範圍值只適用於一個數字而不是你想要的字符串，但是你可以在範圍滑塊旁邊的標籤中顯示溫度值。通過這種方式，用戶將滑動滑塊並在更改滑塊時查看其中一個溫度值。

你可以做到這一點，如：

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/

來源

2017-01-06 03:10:46 JustSomeDude

非常感謝@JustSomeDude 您的解決方案給了我需要的正確的起點。在被告知要使用隱藏輸入之後，我能夠修改它並創建我需要的內容，如我在下面的答案中所示。 – webmasterWannabee

@webmasterWannabee你的答案與我的答案相同，只是你增加了一個額外的步驟來將一個值放入一個隱藏字段中......滑塊元素是一個輸入元素，它的值將與表單序列化，你不需要額外的隱藏領域。當有人發佈一些可以幫助你的東西時，請參閱以下內容：http://stackoverflow.com/help/someone-answers – JustSomeDude

沒錯，@JustSomeDude隱藏的字段被添加了，因爲對我而言，直到我完成它才工作。我在獨特的CMS內部創建這個表單（不是HTML中的常規手寫代碼），所以也許這改變了事情。我發佈的答案是爲我工作的答案，所以我想分享它，以防其他人處於相同的位置。我也很抱歉沒有閱讀一些關於計算器規則的文章，並且感謝你。正式指出。 – webmasterWannabee

如何將範圍輸入的值從整數更改爲字符串？

回答

相關問題