jquery - jQuery在点击时显示隐藏的热点？

Question

我有一系列 DIV，每个都有一个 X 的图像：

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

我想要做的是从它们隐藏但仍然可以点击开始，然后点击显示里面的图像。

如果我使用

<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 标记中的双重属性：

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

一个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显示属性。visibilitydisplay:nonecss

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

2 回答 2