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

Answer 2

如果我理解你的问题，你可以使用下一个（＆＃39; span＆＃39;）来选择范围：

     $(".Foto").click(function() {
        var a = $(this).data('title');
        $(this).next('span').html(a);
  })

要跨越图像，请设置范围position:absolute和容器postion:relative

http://jsfiddle.net/gbg1vfLb/2/

如何将跨度插入图像

2 个答案: