jQuery if myDiv is:visible, addclass to another element答案

【问题标题】：jQuery if myDiv is:visible, addclass to another elementjQuery if myDiv is:visible, addclass to another element
【发布时间】：2011-09-17 13:43:22
【问题描述】：

我又开始接触 jQuery 了，显然我遗漏了一些东西。

我想为一个元素添加一个类，具体取决于另一个元素是否可见。

使用display: none; 隐藏并使用slideToggle 激活

我有这个：

if ($("#about_me").is(':visible')){
        $("#about_me_clicker").addClass(".about_highlight"); 
    } else {
}

现在我假设我完全错了，所以here's a fiddle for you to see。

如果另一个是 :visible，我如何将这个类添加到某个 div？

谢谢。

编辑：

为了清楚起见，我只会将类应用于一个元素。

【问题讨论】：

写下这一行 $("#about_me_clicker").addClass("about_highlight");而不是 $("#about_me_clicker").addClass(".about_highlight");

标签： jquery html css

【解决方案1】：

变化：

$("#about_me_clicker").addClass(".about_highlight");

收件人：

$("#about_me_clicker").addClass("about_highlight");

您不需要在 addClass 的类名中包含 .。

另外，在你的小提琴的 CSS 中：

.about_highlight
{
    color; #f00;
}

应该是：

.about_highlight
{
    color: #f00;
}

另一个注意事项，在 CSS 中，id 优先于类。所以即使 div 有 about_highlight 类，#about_me_clicker 中声明的颜色也会被激活。

要解决此问题，您可以使用!important。

.about_highlight
{
    color: #f00 !important;
}

要解决这个问题，只需制定更具体的 CSS 规则。

#about_me_clicker.about_highlight
{
    color: #f00;
}

更新小提琴：http://jsfiddle.net/YVqJ7/20/

【讨论】：

该死的错别字！真的我应该看到优先级覆盖......我认为是时候休息了......谢谢:)
没问题。哦，您还错过了 CSS 末尾的 { :-P
@BNL：我知道!important 很糟糕，但是您还能如何使颜色优先发挥作用，并且仍然能够在其他元素上使用该类？
这不是问题的一部分。 :) 无论如何都删除了 -1。
也许我应该明确表示该类只会应用于此元素。

【解决方案2】：

那个小提琴有一堆错误：

color; #f00;

应该是冒号而不是分号。

$("#about_me_clicker").addClass(".about_highlight");

删除 . 应该只是类的名称。

您的 CSS 末尾缺少}。

最后，您的 #about_me_clicker css 优先于 .about_highlight 。

【讨论】：

#about_me_clicker.about_highlight { 颜色：#f00; } /* 固定样式 */
@BNL：假设他只有一个元素可以拥有about_highlight 类。

【解决方案3】：

试试这个

http://jsfiddle.net/genesis/YVqJ7/8/

将!important 添加到颜色中，并删除addClass(".about_highlight") 中的点（所以它是addClass("about_highlight")）

【讨论】：

只是一个注释，但!important 在如此简单的 css 中是如此糟糕的做法。
@f0x：这个很重要。看here我刚刚删除了那个！重要的，它不再工作了
确实如此，但还有更优雅的方法可以修复它。这是一种颜色该死的；）请参阅@kingjiv 的答案以了解其背后的原因。而是建议进行 CSS 重构。
我将选择器更改为更具体。 jsfiddle.net/Kyle_Sevenoaks/YVqJ7/19
@gen ，css 优先级 - 即。它会在 Class Rule 之前选择一个 ID CSS Rule。因此，!important 需要一个简单的 css 重构或选择器改进会好得多。使用 !important stackoverflow.com/questions/5701149/… 的有效时间不是简单的事情......比如你控制的 CSS 中的颜色。

【解决方案4】：

只是没有点

if ($("#about_me").is(':visible')){
  $("#about_me_clicker").addClass("about_highlight");
} else {}

【讨论】：