无法修复 JQuery 中 div 元素的背景颜色

Question

我希望我的 div 元素颜色在用户点击后固定。但现在，即使用户点击它，它也会不断改变颜色。

这是我试过的代码片段。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("div").on({
        mouseenter: function(){
            $(this).css("background-color", "lightgray");
        },  
        mouseleave: function(){
            $(this).css("background-color", "lightblue");
        }, 
        click: function(){
            $(this).css("background-color", "Red");
        }  
    });
});
</script>
</head>
<body>
<div>Some Comment Text</div>
</body>
</html>

Answer 1

试试这个：

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("div").on({
            mouseenter: function(){
                $(this).css("background-color", "lightgray");
            },  
            mouseleave: function(){
                $(this).css("background-color", "lightblue");
            }, 
            click: function(){
                $(this).css("background-color", "Red");
                $("div").off();
                // As of jQuery 3.0, .unbind() has been deprecated
            }  
        });
    });
    </script>
    </head>
    <body>
    <div>Some Comment Text</div>
    </body>
    </html>

这里$("div").off();用于解除所有事件监听器的绑定，这样就不会再触发任何事件。

Answer 2

将您的 jQuery 脚本更改为以下内容，它将起作用。

$(document).ready(function(){
$("div").on({
    mouseenter: function(){
        var current_color = $(this).css("background-color");
        if(current_color != 'rgb(255, 0, 0)'){
            $(this).css("background-color", "lightgray");
        }
    },  
    mouseleave: function(){
        var current_color = $(this).css("background-color");
        if(current_color != 'rgb(255, 0, 0)'){
            $(this).css("background-color", "lightblue");
        }
    }, 
    click: function(){
        $(this).css("background-color", "Red");
    }  
});
});

如果有效请告诉我！

Answer 3

如果你想在点击后保持div背景颜色..显然你的代码不正确。您需要维护或存储 div 的状态，例如布尔标志或其他一些技术。

如下所示，您可以使用 data-attribute 在 HTML 中完成您的任务。

$(document).ready(function(){
    $("div").on({
        mouseenter: function(){
            if( $(this).attr('data-isclicked')=="false")
            {
              $(this).css("background-color", "lightgray");
            }
        },  
        mouseleave: function(){
            if( $(this).attr('data-isclicked')=="false")
            {
              $(this).css("background-color", "lightblue");
            }
            
        }, 
        click: function(){
            $(this).attr('data-isclicked','true');
            $(this).css("background-color", "Red");
        }  
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div data-isclicked='false'>1 Some Comment Text</div>
<div data-isclicked='false'>2 Some Comment Text</div>
<div data-isclicked='false'>3 Some Comment Text</div>
<div data-isclicked='false'>4 Some Comment Text</div>

Answer 4

试试这个

click: function(){
    $(this).css("background-color", "Red");
    $(this).mouseleave(function(){
        $(this).css("background-color", "Red");
    });
}

Answer 5

根据您的问题和评论，您似乎希望在单击 Div 后保持颜色为红色。但是，再次单击后，div 将再次绑定到 mouseenter 和 mouseleave 事件。

如果那是您想要的，您需要在单击 div 时进行检查，是否需要 bind 事件或 unbind 它。

注意：如果您使用的 JQuery 版本高于 v1.7，最好使用 on off 而不是 bind unbind

function  entering() {
  $(this).css("background-color", "lightgray");
}
function  leaving() {
  $(this).css("background-color", "lightblue");
}
$(document).ready(function(){
    var isBind = true;
    $('div').on('mouseenter',entering);
    $('div').on('mouseleave',leaving);
    $('div').on('click',function(){
            if (isBind)
            {
                $(this).css("background-color", "Red");
                $("div").off('mouseenter',entering);
                $("div").off('mouseleave',leaving);
                isBind = false;
            }
            else
            {
                $('div').on('mouseenter',entering);
                $('div').on('mouseleave',leaving);
                isBind = true;
            }
    });
});

工作 jsfiddle：https://jsfiddle.net/jkq2wfjz/

无法修复 JQuery 中 div 元素的背景颜色

Not able to fix background color of div element in JQuery

html

jquery

jquery-events