jQuery切换并添加单个图标

Question

使用切换显示/隐藏div时出现问题。应该隐藏的div被命名为“legend”，我有另一个名为“legend-closebutton”的div，它有一个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”如果图例关闭并且应该在点击时打开？

我期待着一丝暗示！ JSC

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块/文件中：

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