L-xl
2020-03-06 20:02
采纳率: 16.7%
浏览 169

如何使用jQuery3的hasClass来实现切换DIV的背景颜色或者图片

在jQuer1.8的和环境下我用 toggle方法实现了切换DIV的背景图片,但在JQuery3里发现不能使用了,之后查找资料学习了一下用hasClass方法来实现,下面是我写的代码,但是没有效果,请大佬们帮我看一下是哪里的问题。

我的思路是写出两个CSS样式,然后通过点击来判断。
运行后发现不能实现,点击以后没有反应,不知道问题出在哪里。
Jquery刚刚开始学习,很多东西都还不太明白。望指教!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .picture1 {
            height: 50px;
            width: 50px;
            background: red;
        }
        .picture2 {
            height: 50px;
            width: 50px;
            background: yellow;
        }
    </style>
    <script type="javascript">
        $(document).ready(function(){
            $('.picture1').click(function () {
                if ($(".picture1").hasClass('picture1')) {
                    $(".picture1").addClass('picture2').removeClass('picture1');
                } else {
                    $(".picture1").addClass('picture1').removeClass('picture2');
                }
            });
        })
    </script>
</head>
<body>
<div class="picture1"></div>
</body>
</html>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • 李国庆❀ 2020-03-06 20:42
    已采纳
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            .picture1 {
                height: 50px;
                width: 50px;
                background: red;
            }
            .picture2 {
                height: 50px;
                width: 50px;
                background: yellow;
            }
        </style>
        <script src="jquery-3.4.1.js"></script>
        <script>
            $(function() {
                $('div').click(function () {
                    if ($(".picture1").hasClass('picture1')) {
                        $(".picture1").addClass('picture2').removeClass('picture1');
                    } else {
                        $("div").addClass('picture1').removeClass('picture2');
                    }
                });
            })
        </script>
    </head>
    <body>
    <div class="picture1"></div>
    </body>
    </html>
    
    已采纳该答案
    打赏 评论

相关推荐 更多相似问题