我正在关注教程jQuery Simple Slider Examples
我的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>
问题是，(我知道我的代码中有问题)如果我更改每月总收入 slider 的值，则两个当前总 EMI 的文本框值strong> 和每月总收入也会更新，反之亦然。
如何设置仅与该特定 slider 相对应的文本框值。
最佳答案
为了只有一个绑定(bind)代码，我会执行以下操作:
带有 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>
以及一次绑定(bind)调用的 JS 代码:
$("[data-slider]").bind("slider:ready slider:changed", function (event, data) {
$($(this).data('target')).val(data.value);
});
关于jQuery Simple Slider 未设置两个文本框的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30604509/