Question

I am using the following code for
1) Display the changed content in DIV container so if someone types in textbox it should simultaneously display the typed content
2) on selection of fonts, font should be applied to that content

" 强势 " 但它不能肯定我在做什么? " /强势 "

<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

Pleae 在 jQuery 准备() 条款中初始化您的处理器。

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

其他变动:

use jquery 1.7.1 instead of this old version
use an id for the text area to detect change
use "keyup" instead of "change" so that the change is immediate (no need to click outside)

如果您只想要更改 div, 只需在最后两个处理器中将 $(. changeme) 替换为 $(#float) 。

Answer 2

您缺少 < a href=> "" "http://api.jquery.com/ready/" rel="nol follow" > toready handler :

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

或者在标签之前将代码放在底部,这样当代码运行时,它就会知道元素。

下列守则应精益求精:

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

和Dystrroy的话一样,你也可以使用jQuery(因为您把它标记为jQuery,我想您也可以使用) ready 方法

Answer 5

http://jsfidle.net/nanoquantumtech/YfQfr/"rel=nol follow" >http://jsfidle.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 );
    });

友情链接