Question

我目前正在为一个调查项目工作。我在一些调查中看过图像问题。我想在我的项目中实现它。所以我想到了这个。

这是我的代码。

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

我该怎么做？感谢。

Answer 1

首先，避免使用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;
}

Answer 2

试试这个：

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

Answer 3

无需在每次点击时使用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;   
}

伪元素适用于所有现代浏览器，甚至适用于IE8+

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

3 个答案: