我正在使用以下代码
1）在DIV容器中显示更改的内容，因此，如果有人在文本框中键入内容，则应同时显示键入的内容
2）在选择字体时，应将字体应用于该内容
但是它不能正常工作，不确定我在做什么错？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Change Contents</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$("#fs").change(function() {
alert($(this).val());
$('.changeMe').css("font-family", $(this).val());
});
$("#size").change(function() {
$('.changeMe').css("font-size", $(this).val() + "px");
});
</script>
</head>
<body>
<form id="myform">
<button>erase</button>
<select id="fs">
<option value="Arial">Arial</option>
<option value="Verdana ">Verdana </option>
<option value="Impact">Impact </option>
<option value="Comic Sans MS">Comic Sans MS</option>
</select>
<select id="size">
<option value="7">7</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</form>
<br/>
<textarea class="changeMe">Text into textarea</textarea>
<div id="container" class="changeMe">
<div id="float">
<p>
Text into container
</p>
</div>
</div>
</body>
</html>
最佳答案
请在jQuery ready（）子句中初始化您的处理程序。
$(function() {
});
您的代码可能如下所示：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
...
<textarea id=ta class="changeMe">Text into textarea</textarea>
<div id="container" class="changeMe">
<div id="float">
<p>
Text into container
</p>
</div>
</div>
<script>
$(window).load(function(){
$('#ta').keyup(function(){
$('#float').html("<p>"+$(this).val()+"</p>");
});
$("#fs").change(function() {
$('.changeMe').css("font-family", $(this).val());
});
$("#size").change(function() {
$('.changeMe').css("font-size", $(this).val() + "px");
});
});
</script>
</body>
</html>
其他变化：
使用jquery 1.7.1代替此旧版本
使用ID作为文本区域来检测更改
使用“键”而不是“更改”，以便立即进行更改（无需在外部单击）
如果只希望更改div，只需在最后两个处理程序中将
$('.changeMe')替换为$('#float')。关于jquery - 使用jQuery更改文本和字体，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10749521/