Question

点击我的示例：http://timkjaerlange.com/foobar/test.html

我目前正在尝试根据页面上div的可见性将一个类应用于标题。

这是我的标记：

<a href="#">Toggle visibility!</a>

<div></div>

<h1 class="one">If the box is hidden this headline should be italic.</h1>
<h1 class="two">If the box is visible this headline should be italic.</h1>

这些是正在发挥作用的类：

.hideIt {
 display: none;
        }

.ifHidden {
 font-style: italic;
        }

.ifVisible {
 font-weight: italic;
        }

jQuery添加了行为：

$('a').click(function() {
 $('div').toggleClass('hideIt');
 if ( $('div').is(':hidden') ) {
  $('h1.one').addClass('ifHidden');
  $('h1.one').removeClass('ifVisible')
  }
 if ( $('div').is(':visible') ) {
  $('h1.two').addClass('ifVisible');
  $('h1.two').removeClass('ifHidden');
  }
});

最初它有效，当我点击锚点时，h1.one是italized，但是当我再次点击时没有任何反应。我有点像Javascript，jQuery n00b，所以任何可能出错的提示都会受到高度赞赏！

Answer 1

有几个问题。首先：

.ifVisible {
   font-weight: italic;
}

斜体不是font-weight的有效值。这是为了字体风格。

其次，你的逻辑有点奇怪。如果隐藏div，则添加ifHidden并从h1.one中删除ifVisible。如果div可见，则添加ifVisible并从h1.two中删除ifHidden。你永远不会添加你正在删除的课程。我不确定你是在做你想做的事。

Answer 2

.ifVisible中的

font-weight具有不正确的值，因此不会更改任何内容。Try here for allowed values

如果div隐藏或可见，则将类应用于元素

2 个答案: