如何在具有图像的div上显示检查的div

我目前正在为一个调查项目工作。我在一些调查中看到了图像问题。我想在我的项目中实现它。所以我有这样的想法。如何在具有图像的div上显示检查的div

这里是我的代码。

<div id="image1" onclick="Imagecheckbox(this);"> 
    <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" /> 
</div> 
<div id="image2" onclick="Imagecheckbox(this);"> 
    <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" /> 
</div> 
<div id="image3" onclick="Imagecheckbox(this);"> 
    <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" /> 
</div>

因此，当我点击任何图像，我想展示一些这样的事情。 enter image description here

所以我创建一个动态div和追加到此。但它不起作用。这是我的代码。

function Imagecheckbox(div) { 
     var clickeddiv = $('#' + div.id); 
     $("<div id='mydiv' style='background:yellow;z-index:1;height:100;width:100;align:right;vertical-align:bottom;etc...'></div>").appendTo($(clickeddiv)); 
    }

我该怎么做？谢谢。

来源

2012-05-29 Chakradhar

你需要使它'位置：absolute'，并包含在图像要被显示在复选框同一容器内，并且该容器必须做成“位置：相对的”。 –

替代方法：在背景中显示较大的图像，并在单击时显示标记的图像作为img标记。 – Dev

首先，避免使用onclick属性。如果你已经在你的页面中包含了jQuery，那么你最好使用它。

要做到这一点，你需要添加position: relative;到包含图像的div元素，position: absolute到包含蜱的div。

HTML

<div id="images"> 
    <div> 
     <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" /> 
    </div> 
    <div> 
     <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" /> 
    </div> 
    <div> 
     <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" /> 
    </div> 
</div>

jQuery的

var $tick = $("<div />").addClass("tick"); 
$("#images div").click(function() { 
    if ($(this).find(".tick").length) { 
     $(this).find(".tick").remove(); 
    } 
    else { 
     $(this).append($tick); 
    } 
});

CSS

#images div { 
    position: relative; 
} 
#images div .tick { 
    background-image: url('tick.gif'); 
    bottom: 0; 
    right: 0; 
    width: 25px; /* amend as needed */ 
    height: 25px; /* amend as needed */ 
    position: absolute; 
}

来源

2012-05-29 15:01:26

谢谢。它为我工作。 – Chakradhar

试试这个：

所有的

function Imagecheckbox(div) { 
    var clickeddiv = $('#' + $(div).attr('id')); 
    $("<div id='mydiv' style='background:yellow;z-index:1;height:100;width:100;align:right;vertical-align:bottom;etc...'></div>").appendTo($(clickeddiv)); 
}

来源

2012-05-29 15:01:02 Fluidbyte

无需创建，并在每一次点击删除与jQuery的一个元素：你可能会得到同样的效果造型一伪元素，例如

HTML

<div id="images"> 
    <div id="image1"> 
     <img src="https://www.google.co.in/images/srpr/logo3w.png"> 
    </div> 
    <div id="image2"> 
     <img src="https://www.google.co.in/images/srpr/logo3w.png"> 
    </div> 
    ... 
</div>

jQuery的
（只是toggleClass()连同父元素事件委托，所以你会避免附加的处理程序为每个div）

$('#images').on('click', 'div', function() { 
    $(this).toggleClass('selected'); 
});

CSS

个

#images > div.selected { 
    position : relative; 
    z-index : 1; 
} 

#images > div.selected:after { 
    content : ""; 
    position : absolute; 
    right  : 0; 
    bottom : 0; 
    width  : ...; 
    height : ...; 
    background : url(selected-tick.gif) center center no-repeat; 
}

pseudoelements上所有现代浏览器中运行，甚至在IE8+

来源

2012-05-29 15:04:38 fcalderan

如何在具有图像的div上显示检查的div

回答

相关问题