Question

因此，我尝试使用.mouseenter方法创建一个简单的事件处理程序，但该事件处理程序未显示在浏览器中。

    <body>
       <header>
            <ul>
                <li>
                    <a href="./home.html">Home</a> 
                </li>
                <li>
                    <a href="./project.html">Projects</a>
                </li>
                <li>
                    <a href="#About-Me">About Me</a>
                </li>
                <li>
                    <a href="./contact.html">Contact</a>
                </li>
            </ul>
        </header>

        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
        <script src="./home.js"></script>
    </body>
<style>
    .effect {
        color: blue;
    }
</style>
<script>    
    $(document).ready(() => {
        $("li").on('mouseenter', (event) => {
            $(this).addClass('effect');
        });
    });
</script>

什么也没发生，我首先拥有最新版本的jQuery 3.4.1，我首先得知问题与.on函数有关，因为浏览器一直在重复

未捕获的类型错误：“ li” .on不是函数。

但是现在它根本无法在我的浏览器中运行，并且我没有收到任何错误消息。

有人可以帮我吗

Answer 1

您可以尝试一下。

$("li").on('mouseenter', function( ) { $(this).addClass('effect'); });

或者在es6中可以使用

$("li").on('mouseenter', (event) => { $(event.currentTarget).addClass('effect'); });

Answer 2

这仅仅是因为$(this)不是指向您的li标签，而是指向孔window。因此它向孔window添加了一个类，没有错误，不是所希望的操作。我认为在您知道“ Akhilesh的”答案很好并且可以解决您的问题之后。

事件未出现在浏览器中

2 个答案: