jQueryは個別のアイコンを切り替えて追加します

Question

divを表示/非表示に切り替える際に問題があります。 divに隠されるはずのdivは "凡例"と呼ばれ、私は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"; 
} 

すべてが正常に動作しますが、どのように私は2つの異なる内容、代わりの「X」を使用することができますか？私は使用することができます

のCSSで、私は歩道が "x"の代わりにこの写真を参照してください。しかし、凡例が開いている（そしてクリックが閉じられている）場合は "x"、凡例が閉じられている場合は "picture1"をクリックして開く必要がある場合、私は何をする必要がありますか？

私はヒントを楽しみにしています！ JSC

Answer 1

あなたが例hiddenため.legendにCSSクラスを切り替えて、新しい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'); 
});