jqueryを使用してページ内のDOM要素値を取得する方法

Question

私はidが "name"と "address"の2つのフィールドを持っているとしましょう。私はdivメッセージに実際の値を表示したいと思っています。そして、私は

<input type="text" id="name" value="MyName" /> 
<input type="text" id="address" value="myaddress" /> 

<div style="visibility:hidden"> 
    <div>Your name is $(name)</div> 
    <div>Your address is $(address)</div> 
</div> 

をした私は、私は空の名前とアドレスを取得しています

<div style="visibility:hidden"> 
    <div>Your name is <script>$("input[id=name]").val()</script></div> 
    <div>Your address is <script>$("input[id=address]").val())</script></div> 
</div> 

を試してみました。

Questtionはどのように修正できますか？よりよいアプローチはありますか？ like

<div style="visibility:hidden"> 
    <div>Your name is <script>GetValue(name)</script></div> 
    <div>Your address is <script>GetValue(address)</</script></div> 
</div> 

値を置き換えるためにjqueryを使用しますか？

Answer 1

はこれを試してみてください：

<input type="text" id="name" value="MyName" /> 
<input type="text" id="address" value="myaddress" /> 
<div style="visibility:hidden">  
    <div>Your name is <span id="userName"></span></div> 
    <div>Your address is <span id="userAddress"></span></div> 
</div> 
<script type="text/javascript"> 
    $(function(){ 
     $("#userName").text($("#name").val()); 
     $("#userAddress").text($("#address").val()); 
    }); 
</script> 

Answer 2

.val()は値を返しますが、DOMにそれを書き込みません。あなたはそれがdocument.writeを使って仕事を得ることができます：

<div style="visibility:hidden"> 
    <div>Your name is <script>document.write($("input[id=name]").val());</script></div> 
    <div>Your address is <script>document.write($("input[id=address]").val());</script></div> 
</div> 

しかし、より良いアプローチは、私がここにjsfiddle作成した

<div style="visibility:hidden"> 
    <div id="name-div"></div> 
    <div id="address-div"></div> 
</div> 

<script> 
$("#name-div").text("Your name is " + $("#name").val()); 
$("#address-div").text("Your address is " + $("#address").val()); 
</script> 

Answer 3

の線に沿ってより多くのだろう方法：http://jsfiddle.net/7se87/

$("input").keyup(function() { 
    var spanclass = $(this).attr('id'); 
    var value = $(this).val(); 
    $("span."+spanclass).text(value); 
}).keyup(); 

<input type="text" id="name" value="MyName" /> 
<input type="text" id="address" value="myaddress" /> 

<div style="display:block;"> 
    <div>Your name is <span class='name'></span></div> 
    <div>Your address is <span class='address'></span></div> 
</div> 

Answer 4

を

2つの結果のdivs idsを与え、包含する（隠れた）divを与えます：

<input type="text" id="name" value="MyName" /> 
<input type="text" id="address" value="myaddress" /> 

<div id="result" style="visibility:hidden"> 
    <div id="result_name"></div> 
    <div id="result_address"></div> 
</div> 

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    jQuery('#name').change(function() { 
     jQuery('#result_name').text('Your name is ' + jQuery(this).val()); 
    }); 

    jQuery('#address').change(function() { 
     jQuery('#result_address').text('Your address is ' + jQuery(this).val()); 
    }); 

    jQuery('#result').css('display', 'block'); 
}); 
</script>