0

jQuery モバイルを使用して最初のアプリを構築しています。アプリの一部は次のとおりです。

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

基本的に、値を入力し、指定した単位に応じて、他の 2 つの単位に変換されます。

さまざまな方法でこれを行うのに多くの時間を費やしましたが、うまくいきません。また、ユーザーが独自に入力する前に最初のフィールドに表示される値が、このページの別のフィールド (存在しない) の値であることも望みます。

誰かが何が間違っているのか、それを行う最善の方法は何かを説明してもらえますか? 該当するボタンがクリックされたときだけ計算を実行した方がよいでしょうか?

これが私のコードです:

$(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

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

});

1 つのヒント: 「name」属性と「id」属性は同じではなく、id には「#」セレクターを使用します。

于 2013-07-25T14:41:21.637 に答える