javascript - 仅在当前单击的 Div 上叠加图像 - Javascript

Question

我正在尝试在当前单击的任何图像/div 上覆盖一个小复选标记(图像)。如果可能的话，我宁愿只使用 javascript，因为我的程序的其余部分都是用它编写的。

$('#checked').click(function(){
  if ( $('.selected').css('visibility') == 'hidden' )
     $('.selected').css('visibility','visible').siblings('visibility','hidden');
  else
     $('.selected').css('visibility','hidden');
});

<div id="checked">
   <div id="axisFrame">
      <img name="msImg" id='axisSofa' src="img.jpg" />
   </div>

<div id="checked">
    <div id="fionaFrame">
       <img name="msImg" id='fionaSofa' src="img.jpg" />
    </div>

.selected {
   width: 46px;
   height: 46px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -23px auto 0 -23px;
   background-image: url(images/msSelected.png);
   z-index: 10;
   visibility:"hidden";
}

我希望 msSelected 图像覆盖在最近单击的 div 上，然后在单击另一个元素(基本上是选择器)时消失。

非常感谢任何帮助!!

Answer 1

这有一些问题 - 现在没有任何东西将选中的元素设置为选中，visibility:hidden 将隐藏整个 div 标签，包括背景图像。

一个解决方案是让 div 背景始终是一个复选框，并在单击时隐藏 img 标签:

$('#msImg').click(function(){
  if ( $(this).css('visibility') == 'hidden' )
     $(this).css('visibility','visible');
  else
     $(this).css('visibility','hidden');
});

<div class="checked">
   <div id="axisFrame">
      <img name="msImg" id='axisSofa' src="img.jpg" />
   </div>

<div class="checked">
    <div id="fionaFrame">
       <img name="msImg" id='fionaSofa' src="img.jpg" />
    </div>

.checked {
   width: 46px;
   height: 46px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -23px auto 0 -23px;
   background-image: url(images/msSelected.png);
   z-index: 10;
}