1

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

这是我的代码。

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

所以当我点击任何图像时，我想展示这样的东西。 在此处输入图像描述

所以我正在动态创建一个 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)); 
    }

我怎样才能做到这一点 ？谢谢。

4

3 回答 3

1

首先，避免使用onclick属性。如果您已经在页面中包含了 jQuery，那么您不妨充分利用它。

为此，您需要添加包含图像的元素以及position: relative;包含刻度的元素。divposition: absolutediv

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-29T15:01:26.847 回答
0

尝试这个：

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-29T15:01:02.487 回答
0

无需在每次单击时使用 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+

于 2012-05-29T15:04:38.933 回答