0

我不确定我没有得到显示.percentage应该通过 jQuery 动态填充的 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 回答