0

.percentagejQueryを介して動的に入力する必要があるdivを示す値を取得していない理由がわかりません。

コード：

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var changedData = $('.changedData').val().length;
var originalData = $('.originalData').val().length;

var precentageOfChange = changedData/originalData * 100 - 100
$('.percentage').append(precentageOfChange);
</script>
</head>
<body>
    <div class="org">
        <form action="#" method="POST">
            <fieldset>
                <legend>Orginal Data</legend>
            </fieldset>
            <textarea class="orginalData"></textarea>
        </form>
    </div>
        <div class="changed">
        <form action="#" method="POST">
            <fieldset>
                <legend>Changed Data</legend>
            </fieldset>
            <textarea class="changedData"></textarea>
        </form>
    </div>
    <div class="percentage"></div>
</body>
</html>
4

1 に答える 1

3

jsFiddle デモ

あなたのコードは準備ができたコールバックにある必要があります: そのままでは、スクリプトは DOM 要素が作成される前に実行されるので、これを実行しようとしてもまだ存在しません。次に、htmlnotを使用する必要がありますappend。innerHTML子要素を作成するのではなく、を設定しようとしています。

を使用しchangeて、値が変更されるたびにこれを実行します。

<script>
    $(document).ready(function () {
        $('.originalData').change(function () {
            $('.changedData').val($(this).val());
            $('.percentage').text('0%');

        });
        $('.changedData').change(function () {
            var changedData = $(this).val().length;
            var originalData = $('.originalData').val().length;

            var percentageOfChange = changedData / originalData * 100 - 100
            $('.percentage').text(percentageOfChange+'%');
        });
    });
</script>
于 2013-03-11T02:04:01.360 に答える