Javascript 如何在图像中插入span

我的目标是将

插入

，但我不知道如何插入。页面上也有类似的效果，但我不希望它出现在

hover（）

上，而是出现在

click（）

上。我想在

中插入“数据标题”，然后在

上显示

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>

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

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

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

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

Javascript:

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

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

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

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

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

$（.Fotogalery img”）.addClass（“Foto”）；
$（“.Foto”）.wrap（“”）；
美元（“.Foto”）。在（“”）之后；
$（“.Foto”）。单击（函数（）{
var a=$（this.data（'title'）；
});

如果我正确理解您的问题，您可以使用next（'span'）选择span:

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

要使span浮动在图像上，请使span

位置：绝对

，容器

位置：相对

试试这个-：

Javascript:

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

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

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

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

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

---

对不起，不清楚你问什么。不能将html span标记插入图像中。请使用问题正下方的

编辑

按钮，添加更多要添加的详细信息。试着解释一下你想做什么。不是技术术语，而是你的动机和目标。你要求的是在点击后（可能在第二次点击时隐藏）将

放置在

的中心。如何写“yuk”，但问题是当我点击图像时，span在次图像中显示我，当我点击第四个span在图像中完全显示我yuk，你们完全正确，但问题是当我点击图像时，span在次图像中显示我，当我点击第四幅显示完全超出图像时，它工作正常，但问题是当我使用浮点时查看：左入。Gallery和不带浮点：左入。Gallery问题是一切都在第一幅图像中：/它工作正常，但当我使用浮点时查看问题：左入。Gallery postimg.org/image/8oj4u9bav和不带浮点：左入.Gallery postimg.org/image/zbhvmzluju最新答案，请查看。如果您想使用

浮动：左

，您应该使用固定的

宽度

和

高度

作为图像/容器。非常感谢，但请告诉我它是如何工作的？为什么.Gallery和.Foto需要显示：内联块和没有.Fotogalery{font size:0；}它不工作？