1

幅の範囲に 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>

テキストボックスごとに変更イベントを追加して、そのようにできることを知っています。テキストボックスごとにイベントを持たずに/少ないコードでそれを行う方法を探しています。どんな助けでも大歓迎です。

4

2 に答える 2

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

于 2013-01-14T20:33:01.190 に答える
1

このフィドルを試してみてください。

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);
});
于 2013-01-14T20:33:02.057 に答える