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>

その他の変更：

  • この古いバージョンの代わりにjquery1.7.1を使用してください
  • 変更を検出するには、テキスト領域にIDを使用します
  • 「変更」の代わりに「キーアップ」を使用して、変更がすぐに行われるようにします（外側をクリックする必要はありません）。

divのみを変更する場合は、最後の2つのハンドラーで$('.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

スクリプトをヘッダーに入れないでください。参照される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 に答える
0

dystroyが言ったことに加えて、jQueryを使用することもできます（jQueryとしてタグ付けしたので、使用していると思います）readyメソッド

于 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 に答える