javascript - 如何将跨度插入图像

Question

我的目标是插入 <span>进入<image> ，但我不知道如何。类似的效果在页面 http://www.bulb.cz/cs/reference 上，但我不想在 hover() 上使用它但在 click() .我想将“数据标题”插入 <span>然后<span>显示在 <image> .

HTML:

 <div class="Fotogalery">   
 <img src="images/Thumb/1.jpg" data-title="Zdar"  /> 
 <img src="images/Thumb/2.jpg" data-title="Ahoj" />
 <img src="images/Thumb/3.jpg"  data-title="Cau"  />
 <img src="images/Thumb/4.jpg" data-title="KUK" />  
 <img src="images/Thumb/5.jpg" data-title="ohh" />  
 </div>

CSS:

.Foto{width: 25%;height:auto;float:left;box-sizing: border-box;}
.Gallery{position:relative;}
.Gallery span{position:absolute;z-index:999;}

Javascript:

$(".Fotogalery img").addClass("Foto");
$(".Foto").wrap( "<div class='Gallery'></div>" );
$(".Foto").after("<span></span>");
$(".Foto").click(function() {
    var a = $(this).data('title');
});

Answer 1

试试这个 — http://jsfiddle.net/sergdenisov/p72jnbLt/5/ :

Javascript:

$('.Fotogalery img').addClass('Foto');
$('.Foto').wrap('<div class="Gallery"></div>');
$('.Foto').click(function () {
    var a = $(this).data('title');
    $(this).after('<span>' + a + '</span>');
});

CSS:

.Fotogalery {
    font-size: 0;
}

.Foto {
    display: inline-block;
    width: 100%;
}

.Gallery {
    position: relative;
    display: inline-block;
    width: 25%;
}

.Gallery span {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    font-size: 16px;
}