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

仅在当前点击的Div - Javascript上覆盖图像

1 个答案: