jquery - jQueryはクリック時に非表示のホットスポットを表示しますか?

Question

それぞれ X のイメージを持つ一連の DIV があります。

<div class="hotspot" id="hs1" class="hotspot"><img src="images/xmark.png" alt="x"></div>

私がやりたいことは、それらを非表示にしながらクリック可能にしてから、onclick で画像を表示することです。

私が使用する場合

<div class="hotspot" id="hs1" class="hotspot">
    <img class="x" src="images/xmark.png" alt="x">
</div>

.hotpsot img { visibility: hidden;}

その後

$('#hs1').click(function(){
        $(this).find(img).show();
});

div はクリックされますが、画像は表示されません。

display:none と children() も試しました

score 1 · Accepted Answer

これを試して：

$('#hs1').click(function(){
    $(this).find('img').show();
});

imgセレクターの周りの引用符がありません。

また、提案。class以下の HTML マークアップから double 属性を削除してください:

<div class="hotspot" id="hs1" class="hotspot">
    <img class="x" src="images/xmark.png" alt="x">
</div>

1 つのclass属性だけで十分です。

<div class="hotspot" id="hs1">
   <img class="x" src="images/xmark.png" alt="x">
</div>

score 0 · Accepted Answer

imgタグセレクターを使用して要素を取得するには、引用符で囲みます。それ以外のimg場合は、変数と見なされます。正しく閉じていません img タグ/がありません。

画像はによって非表示にされますが、show はshow メソッドによって使用されるvisibility:hidden表示プロパティではなく、visibility使用を使用display:noneします。css

$('#hs1').click(function(){
    $(this).find('img').show();
});

2 に答える 2