jQuery滑块与英尺和英寸

我使用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，我从这篇文章中调整:

<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>

我知道我可以为每个文本框添加一个更改事件，并这样做。我正在寻找一种方法来做到这一点，而不必为每个文本框/较少的代码事件。

试试这个:

$("#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

试试这个

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);
});

相关内容

最新更新

热门标签：