Question

简而言之，我有一个JQUERY UI Slider。这些值都基于字符串映射（数组）。然后拆分地图以在滑动时显示2个单独的值。这一切都100％有效。我现在在滑块的两侧有两个箭头，假设做同样的事情，向左/向右滑动和递增/递减。那些也做了。

但是，我如何（向左/右单击我的图像时）从我的地图数组中获取值并更新我的文本控件？

    <script>
        $(function () {
            var valMap =
                [
                "2500#2000","2500#4000","2500#6000","2500#15000",
                "3200#2000","3200#4000","3200#6000","3200#15000",
                "3500#0",
                "4000#2000","4000#4000","4000#6000","4000#15000",
                ];

            var s = $("#slider").slider({
                value: 0,
                min: 0,
                max: valMap.length,
                slide: function (event, ui) {
                    var curVal = valMap[ui.value].split('#');
                    var basicVal = curVal[0];
                    var volVal = curVal[1];                   

                    if (volVal == '0') {
                        $("#vol").fadeOut("slow");
                        $("#volLbl").fadeOut("slow");
                        var premTot = ((parseFloat(basicVal)) / 11).toFixed(2);
                    }
                    else {
                        $("#vol").fadeIn("slow");
                        $("#volLbl").fadeIn("slow");
                        var premTot = ((parseFloat(basicVal) * parseFloat(volVal)) / 14800).toFixed(2);
                    }
                    $("#basic").val("R " + basicVal);
                    $("#vol").val("R " + volVal);
                    $("#prem").val("R " + premTot);
                }
            });
            $("#imgPrev").click(function () {
                s.slider('value', s.slider('value') - s.slider("option", "step"));
            });
            $("#imgNext").click(function () {
                s.slider('value', s.slider('value') + s.slider("option", "step"));
            });
        });
  </script>

<div>
    <p>
        <label>Basic Excess:</label><input type="text" id="basic" style="border:0; color:#f6931f; font-weight:bold;">
        <br />
        <label id="volLbl">Voluntary Excess:</label><input type="text" id="vol" style="border:0; color:#f6931f; font-weight:bold;">
        <br />
        <label>Premium:</label><input type="text" id="prem" style="border:0; color:#f6931f; font-weight:bold;">
    </p>
 <table style="width:100%;">
    <tr>
     <td style="width:26px;"><img src="Images/Previous_24x24.png" id="imgPrev" /></td>
     <td><div id="slider"></div></td>
     <td style="width:26px;"><img src="Images/Next_24x24.png" id="imgNext" /></td>
    </tr>
 </table>
</div>

全部谢谢！

Answer 1

在slide事件中完成的计算与调用#imgNext和#imgPrev点击事件时需要完成的计算完全相同，正在做的是滑块的值正在更新，但实际上没有触发slide事件，因此一种方法是从slide事件的代码中创建一个函数，并在两种情况下调用它，例如：

$(function () {
        var valMap =
            [
            "2500#2000","2500#4000","2500#6000","2500#15000",
            "3200#2000","3200#4000","3200#6000","3200#15000",
            "3500#0",
            "4000#2000","4000#4000","4000#6000","4000#15000",
            ];
        var basicVal, volVal, premTot;

        var s = $("#slider").slider({
            value: 0,
            min: 0,
            max: valMap.length,
            slide: function (event, ui) {
                calculate(ui.value);
            }
        });
        $("#imgPrev").click(function () {
            s.slider('value', s.slider('value') - s.slider("option", "step"));
            calculate(s.slider('value'));
        });
        $("#imgNext").click(function () {
            s.slider('value', s.slider('value') + s.slider("option", "step"));
            calculate(s.slider('value'));
        });

    function calculate(value){
      curVal = valMap[value].split('#');
      basicVal = curVal[0];
      volVal = curVal[1];                   

      if (volVal == '0') {
          $("#vol").fadeOut("slow");
          $("#volLbl").fadeOut("slow");
          var premTot = ((parseFloat(basicVal)) / 11).toFixed(2);
      }
      else {
          $("#vol").fadeIn("slow");
          $("#volLbl").fadeIn("slow");
          var premTot = ((parseFloat(basicVal) * parseFloat(volVal)) / 14800).toFixed(2);
      }
      $("#basic").val("R " + basicVal);
      $("#vol").val("R " + volVal);
      $("#prem").val("R " + premTot);
    }
});

新calculate函数的参数是选定的索引。也许您还想在首次加载页面时设置文本控件。

FIDDLE ：http://jsfiddle.net/YE5v5/

带箭头的JQUERY UI滑块＆amp;字符串映射

1 个答案: