Question

我正在使用jQuery mobile构建我的第一个应用程序，该应用程序的一部分如下：

基本上您输入了您的值，并且根据您指定的单位，您可以在另外两个单位中进行转换。

我花了很多时间尝试用不同的方法做到这一点但却无法使其发挥作用。我还希望在用户输入自己之前出现在第一个字段中的值是此页面上另一个字段（不存在）的值。

有人可以解释我的错误是什么，最好的方法是什么？仅在单击相关按钮时执行计算会更好吗？

这是我的代码：

$(document).ready(function(){       


$("#ex").on("keyup", function() {
var val = +this.value || 0;
var ghz1 = (2.99792458 * val * 10) ;
var nm1 = (ghz1 * Math.pow(10,9) * Math.pow((532 * Math.pow(10,-9)),2) /   (2.99792458*Math.pow(10,8)*Math.pow(10,-9)));
var cm1 = val / (2.99792458  * 10);
var nm2 = (val * Math.pow(10,9) * Math.pow((532 * Math.pow(10,-9)),2) / (2.99792458*Math.pow(10,8)*Math.pow(10,-9)));
var cm2 = (val / (2.99792458 * 10));
var ghz2 = 2.99792458 * val * 10;
$("#ghz1").val(ghz1.toFixed(2));
$("#nm1").val(nm1.toFixed(2));
$("#cm1").val(cm1.toFixed(2));
$("#nm2").val(nm2.toFixed(2));
$("#cm2").val(cm2.toFixed(2));   
$("#ghz2").val(ghz2.toFixed(2));

});

$('#one').click(function() {

$('#one1,#ghz1,#nm1').show(); 
$('#two2').hide();
$('#three3').hide();   
});

$('#two').click(function() {
$('#two2,#cm1,#nm1').show(); 
$('#one1').hide(); 
$('#three3').hide();
});

$('#three').click(function() {
$('#three3,#cm2,#ghz2').show(); 
$('#one1').hide(); 
$('#two2').hide();
});



});

非常感谢。

Answer 1

您正在使用ID选择器#，但您的元素没有任何ID。为了使它们在没有ID的情况下工作，您可以使用像$('input[name="ex"]')这样的选择器。

Answer 2

您需要输入ID，#选择器是ID

<input id="ghz2" value="" name="ghz2" /

小提琴：http://jsfiddle.net/xBUK2/2/

Answer 3

检查工作代码here on jsfiddle。

HTML：

<div data-role="page" class="page1">
    <div data-role="header" >
            <h1>Raman Toolbox</h1>

    </div>
    <div data-role="content" >
<h3> Bandwidth @ Excitation </h3>


    <div data-role="fieldcontain">
            <label for="ex">Bandwidth</label>
            <input type="text" name="ex"  id="ex" data-clear-btn="true">
    </div>

          <div data-role="controlgroup" data-type="horizontal">  
              <a href="" data-role="button" id="one";>cm-1</a>
            <a href="" data-role="button" id="two";>GHz</a>
            <a href="" data-role="button" id="three";>nm</a>
        </div> <!-- control group -->   



             <div data-role="fieldcontain">

        <div id="one1">    
        <label for="ghz1">Raman Shift (GHz)</label>
        <input type="text" name="ghz1" id="ghz1"  readonly>

        <label for="nm1">Raman Shift (nm)</label>
        <input type="text" name="nm1" id="nm1" readonly>  
        </div>

        <div id="two2">    
        <label for="cm1">Raman Shift (cm-1)</label>
        <input type="text" name="cm1" id="cm1" readonly>

        <label for="nm2">Raman Shift (nm)</label>
        <input type="text" name="nm2" id="nm2" readonly> 
        </div>

        <div id="three3">    
        <label for="cm2">Raman Shift (cm-1)</label>
        <input type="text" name="cm2" id="cm2" readonly>

        <label for="ghz2">Raman Shift (GHz)</label>
        <input type="text" name="ghz2" id="ghz2" readonly>  
        </div>   

</div>


</div>  <!-- content -->
</div>
 <!-- page -->

jQuery的：

$(document).ready(function(){       

    $("#ex").on("keyup", function() {
      var val = +$(this).val() || 0;
     var ghz1 = (2.99792458 * val * 10) ;
        var nm1 = (ghz1 * Math.pow(10,9) * Math.pow((532 * Math.pow(10,-9)),2) /   (2.99792458*Math.pow(10,8)*Math.pow(10,-9)));
    var cm1 = val / (2.99792458  * 10);   
    var nm2 = (val * Math.pow(10,9) * Math.pow((532 * Math.pow(10,-9)),2) / (2.99792458*Math.pow(10,8)*Math.pow(10,-9)));
    var cm2 = (val / (2.99792458 * 10));
    var ghz2 = 2.99792458 * val * 10;
    $("#ghz1").val(ghz1.toFixed(2));
    $("#nm1").val(nm1.toFixed(2));
    $("#cm1").val(cm1.toFixed(2));
    $("#nm2").val(nm2.toFixed(2));
    $("#cm2").val(cm2.toFixed(2));   
    $("#ghz2").val(ghz2.toFixed(2));

    });

   $('#one').click(function() {

   $('#one1,#ghz1,#nm1').show(); 
   $('#two2').hide();
   $('#three3').hide();   
    });

    $('#two').click(function() {
   $('#two2,#cm1,#nm1').show(); 
   $('#one1').hide(); 
   $('#three3').hide();
    });

    $('#three').click(function() {
    $('#three3,#cm2,#ghz2').show(); 
    $('#one1').hide(); 
    $('#two2').hide();
    });

});

只有一个提示：“name”和“id”属性不一样，你使用“＃”选择器作为id。

使用keyup（）和click（）在jQuery中计算

3 个答案: