Question

我正在使用以下代码 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>

Answer 1

请在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”代替“更改”，以便立即进行更改（无需点击外部）

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

Answer 2

您缺少ready handler：

$(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");
   });

});

Answer 3

不要将脚本放在标题中：它们是在引用的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>

Answer 4

除了破坏说，你也可以使用jQuery（因为你把它标记为jQuery，我认为你使用它）ready方法

Answer 5

它对我有用：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');
    });

使用Jquery更改文本和字体

5 个答案: