时间戳

首页 > 解决方案 > 单击 div 时更改 div 文本和 CSS，并在再次单击时反转更改

javascript - 单击 div 时更改 div 文本和 CSS，并在再次单击时反转更改

问题描述

我有一个名为#increase-text-weight“增加文本重量”的 div。

每当您单击它时，#post-content应获取另一个名为 div 的内容，font-weight: 500并将其文本#increase-text-weight更改为“DECREASE TEXT WEIGHT”。

当 div 显示“DECREASE TEXT WEIGHT”并单击它时， #post-content 应该会得到 font-weight: 300 并且 #increase-text-weight 应该将文本更改为“INCREASE TEXT WEIGHT”。

我怎样才能做到这一点？

编辑：

我曾尝试过这样做，getElementById但没有奏效。

标签： javascriptjqueryhtmlcss

解决方案

由于您正在学习，因此这是使用两个类执行此操作的一种简短方法。

首先，id选择器$('#test')获取节点元素

然后将单击事件侦听器附加到引用。之后，选择器 $(this) 引用了事件附加函数中使用的选择器，在这种情况下，我们可以说 $(this) == $("#test")。

在点之后，jQuery .toggleClass() 方法从元素中添加或删除一个类，此外，如果您传递第二个 true 或 false 参数，该方法将分别添加或删除给定的类。

因此，如果您链​​接这两个 toggleClass() 如果它不存在则添加该类，如果存在则将其删除

$("#test").click(function(){ // also can be .on('click',function(){ ... })

    $(this).toggleClass("decreased")
    .toggleClass("increased");

});
.decreased {
  font-weight: 100;
  color: red;
  cursor: pointer;
}

.increased {
  font-weight: 300;
  color: green;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test" class="decreased">Increase my font weight!</div>

推荐阅读