Question

我的index.html在

下面

<html>
<head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="js/simple-slider.js"></script>
        <link href="css/simple-slider.css" rel="stylesheet" type="text/css" />
        <link href="css/simple-slider-volume.css" rel="stylesheet" type="text/css" /> 
</head>

<body>
        <h1>Home Loan EMI and Eligibility Calculator</h1>
        <table border="1">
            <tr>
                <td>Gross Monthly Income</td>
                <td><input type="text" data-slider="true" data-slider-range="15000,2000000" data-slider-step="1000"> </td>
                <td><input type="text" id="txtGMI"></td>
            </tr>
            <tr>
                <td>Total Current EMIs</td>
                <td><input type="text" data-slider="true" data-slider-range="0,2000000" data-slider-step="1000"> </td>
                <td><input type="text" id="txtTCEMI">
            </tr>
        </table>

          <script>
            $("[data-slider]")          
                .bind("slider:ready slider:changed", function (event, data) 
                {                   

                     $('#txtGMI').val(data.value);
                     $('#txtTCEMI').val(data.value);
                });
          </script>


</body>
</html>

问题在于，（我知道我的代码中有问题）如果我更改每月总收入滑块的值，则总电流EMI值的文本框值和每月总收入也在不断更新，反之亦然。

如何设置仅对应于特定滑块的文本框值。

Answer 1

为了只有一个绑定代码，我会这样做：

添加data-target的HTML：

<table border="1">
    <tr>
        <td>Gross Monthly Income</td>
        <td><input id='slider1' type="text" data-slider="true" data-slider-range="15000,2000000" data-slider-step="1000" data-target="#txtGMI"> </td>
        <td><input type="text" id="txtGMI"></td>
    </tr>
    <tr>
        <td>Total Current EMIs</td>
        <td><input id='slider2' type="text" data-slider="true" data-slider-range="0,2000000" data-slider-step="1000" data-target="#txtTCEMI"> </td>
        <td><input type="text" id="txtTCEMI">
    </tr>
</table>

带有一个绑定调用的JS代码：

$("[data-slider]").bind("slider:ready slider:changed", function (event, data) {                  
    $($(this).data('target')).val(data.value);
});

Answer 2

最简单的解决方案是将am id添加到inputs并单独绑定事件

HTML ，我添加了slider1和slider2作为滑块的ID

<table border="1">
    <tr>
        <td>Gross Monthly Income</td>
        <td><input id='slider1' type="text" data-slider="true" data-slider-range="15000,2000000" data-slider-step="1000"> </td>
        <td><input type="text" id="txtGMI"></td>
    </tr>
    <tr>
        <td>Total Current EMIs</td>
        <td><input id='slider2' type="text" data-slider="true" data-slider-range="0,2000000" data-slider-step="1000"> </td>
        <td><input type="text" id="txtTCEMI">
    </tr>
</table>

脚本

$("#slider1")          
    .bind("slider:ready slider:changed", function (event, data)         {       
        var xx = "Rs. " + ConvertTOINR(data.value);
         $('#txtGMI').val(xx);
    }); 

$("#slider2")          
    .bind("slider:ready slider:changed", function (event, data) 
    {       
        var xx = "Rs. " + ConvertTOINR(data.value);
         $('#txtTCEMI').val(xx);
    });

jQuery Simple Slider没有设置两个文本框的值

2 个答案: