jQuery:按类更新所有span标记并用textarea值填充?

时间:2012-02-20 05:23:03

标签: javascript jquery function

如何使用textarea值更新所有带有class =“able”的标签 存储在textarea id =“txtholder”class =“txtholder field?

在功能小学中我尝试过:

$('span.able').text($('#Primary.txtholder').val());           FAIL
$('span.able').text($('#Document.Primary.txtholder').val());  FAIL
$('span.able').text($('#txtholder').val());                   FAIL

请告知。

由于

德。

<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery Pass textarea value to all class=able SPANs</title>
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script>
$(function() {
$('#button1').click (function () {
$('span.able').text($('#Primary.txtholder').val());    
});
</script>
</head>
<body>
<div>
<Fieldset>
<form name="Primary" method="post" action="" >
<font size="2" color="maroon"><b>TEXTAREA VALUES:</b></font><br>

<textarea id="txtholder" class="txtholder" name="txtholder" rows="8" cols="45">
8012,Ms 8012,8012@something.com; 8013,Mr. 8013,8013@somethingelse.com; 8014,Mr. 8014,8014@somethingelse.com; 
8015,Mrs. 8015,8015@somethinggood.com; 8016,Mrs. 8016,8016@something.com; 8017,Ms 8017,8017@somethingelse.com; 
8018,Ms 8018,8018@something.com; 8019,Mr. 8019,8019@somethingelse.com; 8020,Mr. 8020,8020@somethingelse.com; 
</textarea><br>

<input type="Button" id="button1" Value="LOAD">

</Fieldset>
</form>
</div>

<span id="result1" class="able"> </span>
<span id="result2" class="able"> </span>
<span id="result3" class="able"> </span>

<span id="result4" class="baker"> </span>
<span id="result5" class="baker"> </span>

<span id="result6" class="charlie"> </span>
</body>
</html>

1 个答案:

答案 0 :(得分:4)

你的最后一个:

$('span.able').text($('#txtholder').val());

有效(proof)。 (或者,如果您不想将其限制为跨度[您在问题文本中说“所有标记”,这可能意味着一些事情,但标题中的“所有标记”,只是{{1 }})

真正的问题在于你所使用的脚本。通过适当的缩进,更清楚的是出了什么问题:

$('.able').text(...);

如您所见,您尚未关闭对<script> $(function() { $('#button1').click (function () { $('span.able').text($('#Primary.txtholder').val()); }); </script> 的第一次通话。因此,放在那里并不重要,因为脚本语法无效。将其更改为:

$

始终如一地缩进代码确实有助于防止出现这类错误。查看浏览器的JavaScript控制台以查找错误也很有用,并use a proper debugger观看代码运行也很有用。