带有英尺和英寸的 jQuery 滑块答案

【问题标题】：jQuery Slider with Feet and Inches带有英尺和英寸的 jQuery 滑块
【发布时间】：2013-01-14 20:07:01
【问题描述】：

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

我知道我可以为每个文本框添加一个更改事件并这样做。我正在寻找一种方法来做到这一点，而无需为每个文本框/使用更少的代码。任何帮助表示赞赏。

【问题讨论】：

所以看起来你的滑块只有英寸，对吗？因此，从英尺框中取值，乘以 12，然后将英寸框中的值相加。
@MattBurland 谢谢 - 我得到了数学部分，请参阅我在 OP 中的最后一段。
您已经使用添加的代码 sn-p 为 #divWidth div 下的每个 input 添加了一个处理程序。我不确定你想要少多少代码？如果您愿意并依赖于冒泡的事件，您可以附加到父 div 而不是每个输入。
@MattBurland 是的，我已经为每个事件添加了一个事件处理程序，但是如何从每个 TextBox 获取正确的值并从该事件处理程序相应地更新滑块？（对不起，如果我不清楚）
您使用$("#txtWidthFt" + i).val(getFeet(ui.values[i])); 设置它们，您可以使用var ft = +$("#txtWidthFt0").val(); 检索值，并且与英寸文本框类似。然后，就像我说的，多英尺乘以 12 并加上英寸。我不确定为什么您有两组输入似乎设置为相同的值。

标签： jquery jquery-slider

【解决方案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

【讨论】：

这行得通。谢谢大家 - 我肯定做错了，因为数字没有加起来。

【解决方案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);
});

【讨论】：