当jquery中的输入发生更改时更新变量
Updating a variable when input changes in jquery
我正在尝试创建一个简单的px到em转换器,当其中一个输入字段发生更改时,它会自动计算值。我有计算值的代码,但当值更改时,它不会更新。
这是HTML
<body>
<h1>PX to EM converter</h1>
<div id="base">
<h2>Enter a base pixel size</h2>
<input id="baseSize" value="16">
<p>px</p>
</div>
<div id="px">
<input id="pxInput" value="16">
<p>px</p>
<div id="emOutput2"></div>
</div>
<p>em</p>
<div id="Em">
<input id="emInput" value="1">
<p>em</p>
<div id="pxOutput2">
</div>
<p>px</p>
</div>
</body>
还有js
$(document).ready(function() {
var baseSize2 = $('#baseSize').val();
var pxInput = $('#pxInput').val();
var emInput = $('#emInput').val();
var emOutput = function() {
return pxInput / baseSize2;
};
var pxOutput = function() {
return emInput * baseSize2;
};
$('#baseSize').attr('value', baseSize2);
$('#pxInput').attr('value', pxInput);
$('#emInput').attr('value', emInput);
$('#pxOutput2').html(pxOutput);
$('#emOutput2').html(emOutput);
});
任何帮助都将不胜感激
目前,您没有任何东西可以监听输入框上的更改。jQuery的变更监听器非常简单。
$('#baseSize').change(function() {
// Code in here will run when the baseSize input is changed
// Note that this must be inside your jQuery ready/onload function.
// Note that this will **not** work with dynamically added elements
});
此外,在更新输入时,请使用jQuery的value函数,而不是访问属性。
$('#baseSize').attr('value', baseSize2);
// Should be
$('#baseSize').val(baseSize2);
我在这里为您创建了一个JSFiddle。
我已经在keyup事件中设置了它:
$("#pxInput").keyup(function(){
var emOutput = function (){ return $('#pxInput').val()/$('#baseSize').val();};
$('#emOutput2').html(emOutput);
});
$("#emInput").keyup(function(){
var pxOutput = function (){ return $('#emInput').val()/$('#baseSize').val();};
$('#pxOutput2').html(pxOutput);
});
相关文章:
- Jquery-每个循环不更新变量
- 函数返回后更新变量
- 我无法通过angularjs中的指令更新变量
- 可以't在quizz页面范围问题上用最终分数更新变量
- 如何在AJAX会话之外更新变量?(Backbone JS/CoffeeScript)
- Javascript 对象方法不更新变量
- 当jquery中的输入发生更改时更新变量
- 无法使用AngularJS更新变量
- 在arr.splice()之后更新变量
- Javascript承诺并更新变量
- jQuery-在输入值更改时更新变量
- 使用数据属性通过 jquery 定位和更新变量
- 从数组中删除不会更新变量内的引用
- 冒泡 从嵌套函数更新变量
- 在 .click 上使用 $.ajax 更新变量
- Javascript - Bootstrap-Slider,如何根据滑块的值更新变量
- JavaScript Ajax 不按时更新变量
- 如何在 JS 中更新变量
- Javascript 没有更新变量
- 在函数中更新变量时,变量不会反映视图中的更新