.click 不工作答案

【问题标题】：.click not working.click 不工作
【发布时间】：2013-03-20 15:50:03
【问题描述】：

我试图在单击并悬停（左边缘 + 边框底部）时执行操作。悬停很好...但是我的 .click 不起作用，我试过这个：

$(".border").hover(
    function(){
        $(this).switchClass( "border", "border_active", 500 );
        return false;
    }
    ,function(){
        $(this).switchClass( "border_active", "border", 400 );
        return false;
    }
);  
$(".border").click(
    function(){
        $(this).removeClass('border');
        $(this).addClass('border_active')
    }
    ,function(){
        $(this).removeClass('border_active');
        $(this).addClass('border');
    }
);

但没什么，这里是漏洞代码：http://jsfiddle.net/Fe6pE/13/，请告诉我让这个工作的最佳方法，谢谢

【问题讨论】：

您正在使用.border 作为.click 的选择器，但您正在从函数中删除.border。相信去掉.border后，就不再绑定你的点击函数了。
为什么在click里面需要两个独立的函数？为什么不做toggleclass？

标签： jquery class click hover

【解决方案1】：

为此，只需使用toggleClass；

$('.border').click(function() {
    $(this).toggleClass('border-active border');
});

这只会交替类。如果开始时border-active 处于打开状态，则单击它将关闭border-active 并打开border。

【讨论】：

$(this).toggleClass('border-active border')
+1 正是我回答的内容（现在已删除以代替您投票）
我试过 $(this).toggleClass('border-active border');但仍然无法正常工作。我不能使用边框：悬停因为实际上这有一个不是这个例子的小动画......jsfiddle.net/Fe6pE/19
@novoa 由于滑动，代码似乎有问题。它跳来跳去。但它仍然有效。悬停>向右移动。单击 > 保持正确。点击 > 恢复正常

【解决方案2】：

正如我在 cmets 中提到的，只需将 toggleClass 添加到它？

$(".border").click(function(){
    $(this).toggleClass('border');
    $(this).toggleClass('border_active');
});

【讨论】：

为什么不赞成现有答案而不是添加重复项？

【解决方案3】：

在 jQuery 中，click() 不接受 2 个函数参数。

你需要改用mousedown()和mouseup()

或者更好的是，您可以避免使用 JavaScript 并像这样构建您的 CSS：

.border {
    /* normal styles */
}
.border:hover {
    /* styles when hovered */
}
.border:active {
    /* styles when mouse is down */
}

【讨论】：

这里是带有多个参数的click 的弃用版本。它在处理程序之间交替。不是mousedownmouseup的别名
更正：多处理器版本被称为toggle，而不是click。