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（）

Answer 1

试试这个：

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

错过img选择器周围的引号。

另外，一个建议。请删除以下HTML标记中的双class属性：

<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>

Answer 2

将img括在引号中以使用标记选择器获取元素，其他明智的img将被视为变量。您没有正确关闭img标记/丢失。

图片被visibility:hidden隐藏，但展示使用显示属性而不是visibility使用display:none中的css，这是show方法使用的。

<强> Live Demo

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