我使用了三个div,为什么textarea内容改变,还是会显示在div2中呢?

来源:3-2 jQuery表单事件之change事件

NiceDay007

2020-04-17 20:49

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left div,
    .right div {
        width: 100%;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left div {
        background: #bbffaa;
    }
    
    .right div {
        background: yellow;
    }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>input、textarea与select</h2>
    <div class="left">
        <div class="aaron">input:
            <input class="target1" type="text" value="监听input的改变" />
        </div>
        <div class="aaron1">select:
            <select class="target2">
                <option value="option1" selected="selected">Option 1</option>
                <option value="option2">Option 2</option>
            </select>
        </div>
        <div class="aaron3">textarea:
            <textarea class="target2" rows="3" cols="20">多行的文本输入控件</textarea>
        </div>
    </div>
    输出结果:
    <div id="result1">1</div>
    <div id="result2">2</div>
    <div id="results">3</div>
    <script type="text/javascript">
    
    //监听input值的改变
    $('.target1').change(function(e) {
        $("#result1").html(e.target.value)
    });               

    //监听select:
    $(".target2").change(function(e) {
        $("#result2").html(e.target.value)
    })               

     //监听textarea:
    $(".target3").change(function(e) {
        $("#results").html(e.target.value)
    })               
    </script>
</body>
</html>

这里的div3即(#result3)为什么一点效果都没有?

写回答 关注

1回答

  • 慕粉3954355
    2020-04-27 11:50:48

    http://img2.mukewang.com/5ea6562f00018ceb03260082.jpg

    因为第三个div中的textarea 中的class设置成了target2;

    正确的<div class="aaron3">textarea:
                <textarea class="target3" rows="3" cols="20">多行的文本输入控件</textarea>
            </div>

jQuery基础(三)—事件篇

jQuery第三阶段开启事件修炼,掌握对页面进行交互的操作

89997 学习 · 625 问题

查看课程

相似问题