javascript - $(this)用法

查看:80
本文介绍了javascript - $(this)用法的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
        $(document).ready(function() {
            
            $(this).mouseover(function() {
                $(this).css('height', '200px');    
            });
            $(this).mouseleave(function() {
                $(this).css('height', '100px');
            });
        });
    </script>
</head>

<body>
    <div id="div0">
    <div class="box" id="div1"></div>
    <div class="box" id="div2"></div>
    <div class="box" id="div3"></div>
    <div class="box" id="div4"></div>
    <div class="box" id="div5"></div>
    <div class="box" id="div6"></div>
    <div class="box" id="div7"></div>
    <div class="box" id="div8"></div>
    <div class="box" id="div9"></div>
    <div class="box" id="div10"></div>
    </div>
</body>


这里的为什么无法实现鼠标经过改变指定div的大小?

解决方案

ready 事件中,this 是指 document,所以你的事件并没有绑定在 div 上,而是绑定在 document 上。按你的意思,应该是这样

$(document).ready(function() {
    $("div.box")
        .mouseover(function() {
            $(this).css("height", "200px");
        })
        .mouseleave(function() {
            $(this).css("height", "100px");
        });
});

https://jsfiddle.net/0cn8xu1p/

这篇关于javascript - $(this)用法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆