如何使用jquery在页面中获取dom元素值

假设我有两个ID为“name”和“address”的字段。我想在显示给用户时在div消息中显示实际值。我还做了如何使用jquery在页面中获取dom元素值

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

我得到空的名称和地址。

任务是我该如何解决它，有没有更好的方法？像

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

并使用jquery来替换值？

来源

2011-01-22 Jon

'$（'name'）。val（）`会更有意义吗？一个ID在任何给定页面中应该是唯一的，所以绝对没有理由尝试缩小“特定”ID。 – 2011-01-22 01:51:40

jQuery是不是让HTML保持JavaScript的原因之一？（结构中的行为？） – nowayyy 2011-01-22 01:56:39

HTML是一种静态语言（不是严格意义上的语言），所以它不能访问JavaScript变量。它必须反过来，用JavaScript设置HTML值。 – Mayank 2011-01-22 01:56:48

试试这个：

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

来源

2011-01-22 01:52:23 Chandu

.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>

来源

2011-01-22 01:54:25 Emmett

我明白了，现在我知道我的方法为什么不起作用。第一个解决方案看起来不错，速记会很棒。我可以使用函数调用来做什么。第二个解决方案比较好，但是我需要事先了解所有领域并为此编码。 – Jon 2011-01-22 03:12:33

线条更：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>

来源

2011-01-22 01:54:46 superUntitled

给出两个结果divs ID，以及封闭（隐藏）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>

来源

2011-01-22 01:56:46 rahmanisback

如何使用jquery在页面中获取dom元素值

回答

相关问题