用于字体大小的 jQuery UI 滑块答案

【问题标题】：jQuery UI Slider for font-size用于字体大小的 jQuery UI 滑块
【发布时间】：2012-09-27 23:43:13
【问题描述】：

我正在尝试将 jQuery UI Slder 作为选择“字体大小”的滑块。我不知道我的语法中的问题在哪里，但它不起作用。文本输入中的数字正在改变，但文本大小没有......

HTML：

<div id="slider"></div>
<input type="text" id="font_size" style="border:0; color:#222; font-weight:bold;" />

<div class="textBox">Lorem ipsum dolor sit amet, id quaestio percipitur vel. Zril propriae vis in, an mei commune invidunt. Nam et nibh consul, vim ei facer nonumes principes. Nec te facilis noluisse. Utinam doming perfecto eum id, mea at patrioque liberavisse, at sit abhorreant referrentur.</div>

jQuery :

$(function() {
    var aFontsSizeArray = new Array('5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '26', '28', '30', '33', '36', '39', '42', '45', '48', '55', '65', '75', '85', '95', '110', '130', '150');
    $('#slider').slider({
        value: 7,
        min: 1,
        max: 35,
        step: 1,
        slide: function(event, ui) {
            var sFontSizeArray = aFontsSizeArray[ui.value];
            $('#font_size').val(sFontSizeArray + ' px');
            $('.textBox').css('font-size', sFontSizeArray );
        }
    });
    $('#font_size').val((aFontsSizeArray[$('#slider').slider('value')]) + ' px');
});

【问题讨论】：

说“它不起作用”并不能帮助我们回答这个问题。你想要发生什么，而正在发生什么？具体一点。
@WillPalmer，他已经提到了。 Number in text input is changeing, but text-size not.你没注意到吗？

标签： jquery user-interface slider font-size

【解决方案1】：

您忘记在代码中添加+ 'px'：

$('.textBox').css('font-size', sFontSizeArray + 'px' );

小提琴：http://jsfiddle.net/AhcD6/3/

【讨论】：