Question

我正在尝试从在线教程中学习jquery。以下代码对我有用，但我如何缩短和改进此代码？ this can be viewed on bottom of this page

$(document).ready(function() {
    $("#alltiles > div").mouseenter(function() {
        $(this).addClass("tile1");
        $(this).removeClass("tile");
        $('img', this).addClass("tileimg1");
        $('img', this).removeClass("tileimg");
        $('p', this).addClass("tilep1");
        $('p', this).removeClass("tilep");
    });
    $("#alltiles > div").mouseleave(function() {
        $(this).addClass("tile");
        $(this).removeClass("tile1");
        $('img', this).addClass("tileimg");
        $('img', this).removeClass("tileimg1");
        $('p', this).addClass("tilep");
        $('p', this).removeClass("tilep1");
    });
});

Answer 1

您可以在hover上使用toggleClass()：

$(function() {
    $("#alltiles > div").hover(function() {
        $(this).toggleClass("tile","tile1");
        $('img', this).toggleClass("tileimg","tileimg1");
        $('p', this).toggleClass("tilep","tilep1");
    });
});

Answer 2

您只能使用CSS styles来执行此操作:) 这里有很多可以声明的动作这是最短的解决方案。

如何缩短此jquery代码

2 个答案: