Onclick 切换以及悬停更改类而不使用 css hover答案

【问题标题】：Onclick toggle as well as on hover change class without using css hoverOnclick 切换以及悬停更改类而不使用 css hover
【发布时间】：2013-10-31 14:55:33
【问题描述】：

我有 3 个盒子。每个大框（红色）内都有一个小框（默认为黑色，悬停为灰色）。

在悬停红色框时，小框的颜色应该会改变（现在可以改变了）。
当您单击红色框时，黑色框应变为灰色（正在工作），同时当您将鼠标悬停在其他框上时，它应该与第 1 点相同（也正在工作）。但问题从这里开始。当您单击红色框时，黑色框会变为灰色，当您再次单击该红色框时，灰色框不会变为黑色。所以黑框应该在每次点击到红框时切换（黑色到灰色，然后灰色到黑色）。
我不能使用任何 css :hover 效果。

jQuery

$('.libg').click(function () {
    $('this').find('.imagebg').removeClass("clicked").toggleClass('active');
    $(this).find('.imagebg').toggleClass("clicked");
}).hover(

function () {
    if (!$(this).find('.imagebg').hasClass("clicked")) $(this).find('.imagebg').addClass('active');
},

function () {
    if (!$(this).find('.imagebg').hasClass("clicked")) $(this).find('.imagebg').removeClass('active');
});

有什么关系吗（数据点击为真）。

这是 jfiddle -- http://jsfiddle.net/squidraj/PTZE9/5/

【问题讨论】：

我在你的小提琴中发现灰色框切换回黑色！
它似乎正在按照您描述的方式工作。但是它应该是 $(this) 而不是 $('this')。
我看到的错误是：点击后悬停不起作用
@optionaloptional 是的，但前提是您从框中鼠标移出。单击红色框后，黑色框变为绿色，不要尝试通过再次单击来切换它，但不要将鼠标移出红色框。

标签： javascript jquery html

【解决方案1】：

从$('this')中删除多余的“ ”

使用

$(this).find('.imagebg').removeClass("clicked").toggleClass('active');

改为

$('this').find('.imagebg').removeClass("clicked").toggleClass('active');

Demo

【讨论】：

好地方。我已经删除了''。但是现在当你第一次点击时，黑框并没有变成灰色，但是如果你点击第二次，它就会改变。jsfiddle.net/squidraj/PTZE9/10
@PrithvirajMitra 效果很明显！每次点击它都会在灰色和红色之间切换。
Dhaval 是的，它工作得很好。但我想要的是当你第一次点击红框时，黑框应该变成灰框。它正在发生，但在下一次点击中。
这就是我想要做的。现在解决了。 jsfiddle.net/squidraj/PTZE9/17谢谢
@PrithvirajMitra 哦，我明白了！但我没有看到任何切换效果