0

我在使用 jquery 时面临背景颜色更改问题。

当页面第一次加载并且用户将鼠标悬停在表格行上时，表格行的背景会发生变化。

一旦用户单击表格行单元格以生成 jquery 弹出窗口，弹出窗口所属行的背景颜色就会发生变化。

一个用户通过单击文档上的任意位置关闭弹出窗口（使用 jquery），第一行提到的行的悬停突出显示功能被禁用，我需要它保持有效，只要没有弹出窗口打开。

这是我试图添加到我的 jquery 中的内容，它一直有效，直到其中一个弹出窗口显示一次。换句话说，下面的代码只触发一次，而不是像我需要的那样保持有效：

if($(".webpopup,.phonepopup").is(":hidden")){
    $("tr").hover(function(){
        $(this).toggleClass('fresh');
    });
}

js小提琴：

http://jsfiddle.net/vUWsb/

4

4 回答 4

2

尝试!important：

.fresh{background-color:#ddd !important;}

$("tr").hover(function(){
    $(this).addClass('fresh');
}, function() {
    $(this).removeClass('fresh')    
});

http://jsfiddle.net/vUWsb/6/

像这样的东西？

 $("tr").hover(function(e){
        if ($(".webpopup, .phonepopup").is(":visible")) {
           return false;
        }
       $(this).addClass('fresh');     
    }, function() {
       $(this).removeClass('fresh');
 });

http://jsfiddle.net/vUWsb/10/

于 2012-06-25T18:05:05.687 回答
1

在我看来，单击单元格后悬停不起作用。相反，看起来您在单击表格单元格时将背景设置为默认白色：

$(document).click(function() {
    $("#favorites-table tr").css({
        "background-color": "#fff" // <--- this part
    });
    $(".webpopup, .phonepopup").hide();
});

由于内联样式优先于类样式，因此您永远不会看到悬停效果，因为它被您设置的背景颜色隐藏。

于 2012-06-25T17:59:39.370 回答
0

您需要将其基于您的“新鲜”课程。

像

    $("#favorites-table tr").css({
        "background-color": "#fff"
    });

添加一个内联样式，它胜过 css 类。

使用addClassandremoveClass代替

http://jsfiddle.net/imoda/vUWsb/2/

于 2012-06-25T18:00:18.660 回答
0

其他贡献正确地指出您需要使用类而不是内联颜色，但正如 MHZ 一直在说的，这并不是所需的全部功能。悬停的问题在于它尝试测试可见性的方式不正确。考虑可见性的原始测试：

if($(".webpopup,.phonepopup").is(":hidden")){
    $("tr").hover(function(){
        $(this).toggleClass('fresh');
    });
}

if 函数将始终返回 true。然后，由于它始终为真，它将创建悬停事件。这发生一次，在文档加载时。然后你就被这个事件监听器困住了。

相反，MHZ，我认为您想要以下内容：

theyAreVisible = function() {
    var shown = $('.webpopup,.phonepopup').map(function() {
        return $(this).is(':visible') ? true : null;
    });
    return shown.length > 0 ? true : false;
};

$("tr").hover(function() {
    if (!theyAreVisible()) $(this).addClass('fresh');
}, function() {
    if (!theyAreVisible()) $(this).removeClass('fresh');

});

这样，您就有了一个悬停事件处理程序，用于检查是否有任何弹出窗口打开。map 函数将遍历每一个并查找是否有任何个人是打开的，如果找到则返回 true。但是我们不能只返回这个结果，因为 if([]) 将解析为 true。考虑：

if ([]) { console.log('yup!'); }

带走：

  1. 始终在事件处理程序中进行检查（在本例中为切换）
  2. 确保你认为解决为真的事情实际上是解决为真的。
于 2012-06-25T18:31:58.173 回答