jQuery 简单滑块未设置两个文本框的值

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>

问题是，（我知道我的代码有问题）如果我更改 每月总收入 滑块的值，[=21] 的文本框值=] 当前 EMI 总额和 每月总收入 也在更新，反之亦然。

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

Answer 1

最简单的解决方案是在inputs中添加am id，然后单独绑定事件

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

Answer 2

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

HTML 加上 data-target：

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

jQuery 简单滑块未设置两个文本框的值

jQuery Simple Slider not setting the values for both text boxes

jquery

slider