Question

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

Answer 1

jsFiddle Demo

您的代码需要处于准备好的回调中：原样，脚本在创建DOM元素之前执行，因此当您尝试运行它时它们还不存在。其次，您应该使用html而不是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>

div中的值未显示

1 个答案:

jsFiddle Demo