1

我将以下代码用于
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>
4

5 回答 5

2

请在 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 来检测更改
  • 使用“keyup”而不是“change”，以便立即更改（无需点击外部）

如果您只想更改 div，只需在最后两个处理程序中替换$('.changeMe')为$('#float')。

于 2012-05-25T06:34:07.863 回答
1

您缺少准备好的处理程序：

$(function(){
  // your code goes here
});

或者将您的代码放在</body>标签之前的底部，以便在您的代码运行时，它知道元素。

以下代码应该可以正常工作：

$(function(){

   $("#fs").change(function() {
     alert($(this).val());
     $('.changeMe').css("font-family", $(this).val());
   });

   $("#size").change(function() {
     $('.changeMe').css("font-size", $(this).val() + "px");
   });

});
于 2012-05-25T06:30:32.560 回答
0

除了dystroy所说的之外，您还可以使用jQuery（因为您将其标记为jQuery，我假设您使用它）准备好的方法

于 2012-05-25T06:30:44.177 回答
0

它对我有用：http: //jsfiddle.net/nanoquantumtech/YfQfr/

$(document).ready(function () {
        $("#fs").live('change', function () {
            alert($(this).val());
            $('.changeMe').css("font-family", $(this).val());

        });

        $("#size").live('change', function () {
            $('.changeMe').css("font-size", $(this).val() + "px");
        });

        $("#fs").trigger('change');

        $("#size").trigger('change');
    });
于 2012-05-25T06:31:58.907 回答
0

不要将脚本放在标题中：它们在引用的 DOM 对象可用之前执行。

把它放在你身体的末端：

<script>
$(window).load(function(){
    $("#fs").change(function() {
    alert($(this).val());
    $('.changeMe').css("font-family", $(this).val());
    $("#size").change(function() {
        $('.changeMe').css("font-size", $(this).val() + "px");
    });
});
</script>
于 2012-05-25T06:28:51.913 回答