jQuery UI - 在最后一个值之前注入/添加字符答案

【问题标题】：jQuery UI - Inject/add character before last valuejQuery UI - 在最后一个值之前注入/添加字符
【发布时间】：2013-03-08 16:28:19
【问题描述】：

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

我想要做的是，在最后一步（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" ) );

});

【问题讨论】：

标签： jquery html jquery-ui slider add

【解决方案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" ) );
});

【讨论】：

【解决方案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

【讨论】：