Question

我正在使用JQuery滑块来表示宽度范围。这是我的HTML：

<div id="divWidth">
    Width:
    <div>
        <input type="text" class="sliderValue" data-index="0" value="10" id="txtWidthFt0"
            runat="server" style="width: 20px" />'
        <input type="text" class="sliderValue" data-index="0" value="10" id="txtWidthIn0"
            runat="server" style="width: 20px" />" to
        <input type="text" class="sliderValue" data-index="1" value="10" id="txtWidthFt1"
            runat="server" style="width: 20px" />'
        <input type="text" class="sliderValue" data-index="1" value="10" id="txtWidthIn1"
            runat="server" style="width: 20px" />"
    </div>
    <br />
    <div id="sliderWidth">
    </div>
</div>

我可以在滑块移动时获取文本框值。我需要帮助这样做 - 在文本框值更改时更改滑块值。

这是我当前的javascript，我是从this post调整的：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">

    function getFeet(n) {
        return Math.floor(n / 12);
    }
    function getInches(n) {
        return (n % 12);
    }

    $(document).ready(function () {
        $("#sliderWidth").slider({
            min: 1,
            max: 500, 
            range: true,
            values: [1, 500],
            slide: function (event, ui) {
                for (var i = 0; i < ui.values.length; ++i) {
                    $("#txtWidthFt" + i).val(getFeet(ui.values[i]));
                    $("#txtWidthIn" + i).val(getInches(ui.values[i]));
                }
            }
        });

        // need help here:
        $("#divWidth input").change(function () {
            var $this = $(this);
            $("#sliderWidth").slider("values", ?);
        });
    });

</script>

我知道我可以为每个文本框添加更改事件并按此方式执行。我正在寻找一种方法来做到这一点，没有每个文本框的事件/更少的代码。任何帮助表示赞赏。

Answer 1

试试这个：

$("#divWidth input").blur(function () {
  var $this = $(this),
      startFt = parseInt($('#txtWidthFt0').val()),
      startIn = parseInt($('#txtWidthIn0').val()),
      startTotal = (startFt * 12) + startIn,
      endFt = parseInt($('#txtWidthFt1').val()),
      endIn = parseInt($('#txtWidthIn1').val()),
      endTotal = (endFt * 12) + endIn;
  $("#sliderWidth").slider('values',0,startTotal);
  $("#sliderWidth").slider('values',1,endTotal);
});

这是一个jsFiddle

Answer 2

试试这个fiddle。

HTML：

<body>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</body>
<div id="divWidth">Width:
  <div>
    <input type="text" class="sliderValue" data-index="0" value="10" id="txtWidthFt0"
    runat="server" style="width: 20px" />'
    <input type="text" class="sliderValue" data-index="0" value="10" id="txtWidthIn0"
    runat="server" style="width: 20px" />" to
    <input type="text" class="sliderValue" data-index="1" value="10" id="txtWidthFt1"
    runat="server" style="width: 20px" />'
    <input type="text" class="sliderValue" data-index="1" value="10" id="txtWidthIn1"
    runat="server" style="width: 20px" />"</div>
  <br />
  <div id="sliderWidth"></div>
</div>

JS：

function getFeet(n) {
  return Math.floor(n / 12);
}

function getInches(n) {
  return (n % 12);
}

function setInputs(values) {
  $("#txtWidthFt0").val(getFeet(values[0]));
  $("#txtWidthIn0").val(getInches(values[0]));
  $("#txtWidthFt1").val(getFeet(values[1]));
  $("#txtWidthIn1").val(getInches(values[1]));
}

$(document).ready(function () {
  $("#sliderWidth").slider({
    min: 1,
    max: 500,
    range: true,
    values: [1, 500],
    slide: function (event, ui) {
        setInputs(ui.values);
    }
  });

  $("#divWidth input").change(function () {
    var startFeet = parseInt($("#txtWidthFt0").val());
    var startInches = parseInt($("#txtWidthIn0").val());
    var endFeet = parseInt($("#txtWidthFt1").val());
    var endInches = parseInt($("#txtWidthIn1").val());
    var start = (startFeet * 12) + startInches;
    var end = (endFeet * 12) + endInches;

    $("#sliderWidth").slider("values", [start, end]);
  });

  var values = $("#sliderWidth").slider("values");
  setInputs(values);
});

带脚和英寸的jQuery滑块

2 个答案: