jQuery 切换和添加单独的图标

Question

我在使用开关显示/隐藏 div 时遇到问题。应该隐藏的 div 被命名为“legend”，我有另一个 div 叫做“legend-closebutton”，它有一个 onclick 来隐藏/显示图例。代码如下所示:

<div class="legend-closebutton" onclick="$('#legend').toggle();">
</div>

我有以下 CSS:

    .legend-closebutton{
   position: absolute;
   right: 10px;
   top: 190px;
   z-index: 3;
   width: 25px;
   height: 25px;
   cursor: pointer;
   background-color: rgba(255, 255, 255, 1);
   color: #000000;
   border-radius: 2px;
} 
.legend-closebutton:before {
  content: 'x';
  font-size: 12px;
  color: black;
  font-weight:bold;
  text-align: center;
  display: block;
  font-size: 12px;
  line-height: 25px;
  font-family: "HelveticaNeue", "Helvetica";
}

一切正常，但我怎样才能使用两个不同的内容，而不是“x”？我可以用

content: url("mypicture1.png");

在 css 中，所以我在人行道上看到的是这张图片而不是“x”。但是，如果我想在图例打开时使用“x”(并在点击时关闭)，在图例关闭时使用“picture1”并且应该在点击时打开，我需要做什么？

我期待着一个提示!股份公司

Answer 1

您可以在 .legend 上切换 CSS 类，例如 hidden 并添加新的 CSS 规则:

<div class="legend-closebutton" onclick="$('#legend').toggle().toggleClass('hidden');">
</div>

添加 CSS 规则:

.hidden .legend-closebutton:before {
  content: url("mypicture1.png");
}

---

此外，我建议将 onclick 移动到您的 javascript block /文件中:

$('.legend-closebutton').on('click', function(){
  $('#legend').toggle().toggleClass('hidden');
});