0

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

http://jsfiddle.net/eriky/xBUK2/1/

基本上你输入你的值，根据你指定的单位，你可以用另外两个单位进行转换。

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

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

这是我的代码：

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



});

非常感谢。

4

3 回答 3

0

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

于 2013-07-25T14:29:07.980 回答
0

您需要输入的 ID，#选择器按 ID

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

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

于 2013-07-25T14:30:31.747 回答
0

在 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。

于 2013-07-25T14:41:21.637 回答