jquery - 如何使用CSS在文本框之前附加美元符号并在文本框之后附加 "k"

Question

<强> Here is a link to my JSFiddle

当前，您可以移动 slider ，输入的文本将从 0 变为 100。

问题:我想在文本框之前附加一个“$”，在文本框之后附加一个“k” - 即 20 显示为 $20k，50 显示为 $50 k

我希望使用 CSS 附加“$”和“k”，这样值就不会受到影响。

到目前为止我所拥有的(如上面的 jsfiddle 链接所示):

HTML:

<div id="container">
<input id="min" type="text" class="sliderValue" data-index="0" value="1" />
<div id="slider"></div>
</div>

CS:

#container {
width:200px;
margin:40px;}

#min, #max {
width: 50px;
height:40px;
border: none;
text-align: center;
font: normal 24px verdana;}

JS:

$(document).ready(function () {
$("#slider").slider({
    range: false,
    min: 0,
    max: 100,
    step: 1,
    values: [1],
    slide: function (event, ui) {
        for (var i = 0; i < ui.values.length; ++i) {
            $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
        };
        var delay = function () {
            var handleIndex = $(ui.handle).data('index.uiSliderHandle');
            var label = handleIndex == 0 ? '#min' : '#max';
            $(label).html(ui.value).position({
                my: 'center top',
                at: 'center bottom',
                of: ui.handle,
                offset: "0, -74"
            });
        };
        setTimeout(delay, 0);
    }
});
$("input.sliderValue").change(function () {
    var $this = $(this);
    $("#slider").slider("values", $this.data("index"), $this.val());
    var handle = $(this).attr('id') == 'min' ? 0 : 1;
    $(this).position({
        my: 'center top',
        at: 'center bottom',
        of: $('a.ui-slider-handle:eq(' + handle + ')'),
        offset: "0, -54"
    });
});
$('#min').html($('#slider').slider('values', 0)).position({
    my: 'center top',
    at: 'center bottom',
    of: $('#slider a:eq(0)'),
    offset: "0, -54"
});
$('#max').html($('#slider').slider('values', 1)).position({
    my: 'center top',
    at: 'center bottom',
    of: $('#slider a:eq(1)'),
    offset: "0, -54"
    });
});

Answer 1

活生生的例子:http://jsfiddle.net/qaU7K/92/

首先将其添加到默认值中即可:

<input id="min" type="text" class="sliderValue" data-index="0" value="$1k" />

然后更改此行:

 $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);

为此:

$("input.sliderValue[data-index=" + i + "]").val("$" + ui.values[i] + "k");

并将 div 的 width 更改得更大一些:

#min, #max {
    width: 76px;  /*modified*/
    height:40px;
    border: none;
    text-align: center;
    font: normal 24px verdana;
}

活生生的例子:http://jsfiddle.net/qaU7K/92/