Question

我使用以下链接中的两个滑块[https://github.com/loopj/jquery-simple-slider]。第一个应显示小数点，第二个不应显示小数点。

这是我的HTML代码。

<input  type="text" id="first" name="first" value="" data-slider="true" data-slider-range="0,100" data-slider-highlight="true" data-slider-step="1" /><span></span><span class="output">0</span>
<input  type="text" id="second" name="second" value="" data-slider="true" data-slider-range="0,100" data-slider-highlight="true" data-slider-step="1" /><span></span><span class="output">0</span>

这是我的剧本

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="simple-slider.js"></script>
<link href="simple-slider.css" rel="stylesheet" type="text/css" />
<link href="simple-slider-volume.css" rel="stylesheet" type="text/css" />  

<script>
$(function () {
        $("[data-slider]")
                .each(function () {
                    var input = $(this);
                    $("<span>")
                            .insertAfter($(this));
                })
                .bind("slider:ready slider:changed", function (event, data) {
                    $(this)
                            .nextAll(".output:first")
                            .html(data.value.toFixed(1));
    });
     });
</script>

但他们两个都显示小数点。为了不显示小数点，我在最后添加了html（data.value.toFixed（0）），但这适用于它们。所以我创建了一个新的simple-slider.js并将其命名为predata_simple-slider.js并将数据滑块值更改为predata-slider。

这就是我在html中更改代码的方式。

<input  type="text" id="first" name="first" value="" data-slider="true" data-slider-range="0,100" data-slider-highlight="true" data-slider-step="1" /><span></span><span class="output">0</span>
<input  type="text" id="second" name="second" value="" predata-slider="true" data-slider-range="0,100" data-slider-highlight="true" data-slider-step="1" /><span></span><span class="output">0</span>

脚本：

<script>
$(function () {
        $("[data-slider]")
                .each(function () {
                    var input = $(this);
                    $("<span>")
                            .insertAfter($(this));
                })
                .bind("slider:ready slider:changed", function (event, data) {
                    $(this)
                            .nextAll(".output:first")
                            .html(data.value.toFixed(1));
    });
     });
</script>
<script>
$(function () {
        $("[predata-slider]")
                .each(function () {
                    var input = $(this);
                    $("<span>")
                            .insertAfter($(this));
                })
                .bind("slider:ready slider:changed", function (event, data) {
                    $(this)
                            .nextAll(".output:first")
                            .html(data.value.toFixed(1));
    });
     });
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="simple-slider.js"></script>
<script src="predata-simple-slider.js"></script>
<link href="simple-slider.css" rel="stylesheet" type="text/css" />
<link href="simple-slider-volume.css" rel="stylesheet" type="text/css" />

但我需要知道如何在一个脚本中执行此操作？

提前致谢。

Jquery Simple Slider应该显示带小数点且没有小数点的值

0 个答案: