jQuery UI - 在上一个值之前注入/添加字符

Question

基本滑块，范围从10-1000，每步（10-30-50等）之间为20。

我想要做的是，在最后一步（1000）的值之前添加/插入一个字符。

对不，它返回为“560 kr/h”或“400 kr/h”，这很好。但是在1000时我希望它变成“> 1000 kr/h”。

以下是我的设置。

HTML

<label for="value1" class="value">Mitt pris:</label> 
<input type="text" id="value1" />kr/h 
<div id="slider1"></div> 

jQuery的

$(function() { 
    $("#slider1").slider({ 
     value: 300, 
     min: 10, 
     max: 1000, 
     step: 20, 
     slide: function(event, ui) { 
      $("#value1").val(ui.value);} 
    }); 
     $("#value1").val($("#slider1").slider("value")); 

}); 

Answer 1

虽然有其他的方法来做到这一点，一个简单的if语句后您所设置的值应该是所有您需要：

slide: function(event, ui) { 
     $("#value1").val(ui.value); 
     if ($("#value1").val == 1000) { $("value1").val(">1000");} } 

这是一个更简洁的方式，但可能难以阅读

slide: function(event, ui) { 
     $("#value1").val(ui.value == 1000 ? ">1000" : ui.value);} 

这是很好的设计，实际上使这个settor的功能，所以在这里你设置value1您可以使用它在两个地方：

$(function() { 
    var setValue = function(value) { 
     $("#value1").val(value == 1000 ? ">1000" : value); }; 
    $("#slider1").slider({ 
     value: 300, 
     min: 10, 
     max: 1000, 
     step: 20, 
     slide: function(event, ui) { 
      setValue(ui.value);} 
    }); 
    setValue($("#slider1").slider("value")); 
}); 

Answer 2

尝试：

$(function() { 
    $("#slider1").slider({ 
     value: 300, 
     min: 10, 
     max: 1000, 
     step: 20, 
     slide: function(event, ui) {    
      $("#value1").val(ui.value == 1000 ? '> 1000' : ui.value); 
     } 
    }); 
    $("#value1").val($("#slider1").slider("value")); 
}); 

这里的fiddle