Как показать зарегистрированный div на div, который имеет изображение

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> 

поэтому, когда я нажимаю на любое изображение, я хочу показать что-то вроде этого.

поэтому я создаю 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; 
} 

pseudoelements работать на всех современных браузере и даже на IE8+