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

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

jquery

jQuery简单滑块未设置两个文本框的值,jquery,slider,Jquery,Slider,我正在学习教程我的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/

我正在学习教程

我的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和资格计算器
月总收入
总电流发射率
$（“[数据滑块]”）
.bind（“滑块：就绪滑块：已更改”），函数（事件、数据）
{                   
$（'#txtGMI'）.val（data.value）；
$（'#txtTCEMI'）.val（data.value）；
});

问题是，（我知道我的代码有问题）如果我更改月总收入滑块的值，当前总排放量和月总收入的文本框值也会更新，反之亦然

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

最简单的解决方案是将am id添加到

输入中，然后分别绑定事件
HTML，我添加了slider1
和slider2
作为slider的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>

为了只有一个绑定代码，我将执行以下操作：
添加了数据目标的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>

在哪里声明了ConvertTOINR
函数？@taxicala。OP修改了该问题，它在全局范围内的单独脚本块中定义
<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>

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