計算jQuery中使用的keyup（），然後點擊（）

Question

我建立我與jQuery移動和應用程序的一個部分第一個應用如下：

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



}); 

非常感謝。

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。