获取图像的 alt 属性并将其添加到新 div
Getting the alt attribute of images an adding this in new div
我有一个滑块,我尝试在我的滑块中的每个图像上创建一个新的 div,它应该显示每个图像的 alt 属性。
我只设法获得第一张图片的替代文字,而不是出现在每张图片上,但每张图片都有自己的替代文字..所以这不是我需要的解决方案..我试图找到正确的解决方案但陷入困境这一点..
jQuery(function($){
$("<div class='image_title'></div>").insertAfter(".et_pb_gallery_image .et_overlay");
var title = $(".et_pb_gallery_image img").attr("alt");
$(".image_title").text(title);
});
我也试过这个:
jQuery(function($){
$("<div class='image_title'></div>").insertAfter(".et_pb_gallery_image .et_overlay");
$(".image_title").each(function(){
var levelArray = $(".et_pb_gallery_image img").map(function() {
return $(this).attr("alt");
}).get();
$( ".image_title" ).html(title);
});
});
但是这会显示每张图片上的所有替代文字...
我使用带有内置内容图像滑块的主题的 wordpress > 但仅当灯箱 shown/pops 启动时,内置滑块才显示 titel 和 alt 属性。我希望替代文本在图像上可见,这就是我想要做的。
HTML 滑块在 html 页面中的外观片段:
<div class="slider">
<div class="post_gallery">
<div class="gallery_item">
<div class="et_pb_gallery_image">
<a href="#" title="image title 01">
<img src="image.jpg" alt="Pic 01">
<span class="et_overlay"></span>
<!-- this is created with the code I used -->
<div class="image_title">Pic 01</div>
</a>
</div>
</div>
</div>
<div class="post_gallery">
<div class="gallery_item">
<div class="et_pb_gallery_image">
<a href="#" title="image title 02">
<img src="image.jpg" alt="Pic 02">
<!-- but the second image also has "Pic 01" instead of "Pic 02" -->
<div class="image_title">Pic 01</div>
</a>
</div>
</div>
</div>
</div>
试试这个:
$(".et_pb_gallery_image .et_overlay").each(function(){
$("<div class='image_title'></div>").insertAfter(this);
var thisImage = $(this).parents('.et_pb_gallery_image').find('img');
var title = thisImage.attr('alt');
$(this).siblings('.image_title').html(title);
});
我有一个滑块,我尝试在我的滑块中的每个图像上创建一个新的 div,它应该显示每个图像的 alt 属性。 我只设法获得第一张图片的替代文字,而不是出现在每张图片上,但每张图片都有自己的替代文字..所以这不是我需要的解决方案..我试图找到正确的解决方案但陷入困境这一点..
jQuery(function($){
$("<div class='image_title'></div>").insertAfter(".et_pb_gallery_image .et_overlay");
var title = $(".et_pb_gallery_image img").attr("alt");
$(".image_title").text(title);
});
我也试过这个:
jQuery(function($){
$("<div class='image_title'></div>").insertAfter(".et_pb_gallery_image .et_overlay");
$(".image_title").each(function(){
var levelArray = $(".et_pb_gallery_image img").map(function() {
return $(this).attr("alt");
}).get();
$( ".image_title" ).html(title);
});
});
但是这会显示每张图片上的所有替代文字...
我使用带有内置内容图像滑块的主题的 wordpress > 但仅当灯箱 shown/pops 启动时,内置滑块才显示 titel 和 alt 属性。我希望替代文本在图像上可见,这就是我想要做的。
HTML 滑块在 html 页面中的外观片段:
<div class="slider">
<div class="post_gallery">
<div class="gallery_item">
<div class="et_pb_gallery_image">
<a href="#" title="image title 01">
<img src="image.jpg" alt="Pic 01">
<span class="et_overlay"></span>
<!-- this is created with the code I used -->
<div class="image_title">Pic 01</div>
</a>
</div>
</div>
</div>
<div class="post_gallery">
<div class="gallery_item">
<div class="et_pb_gallery_image">
<a href="#" title="image title 02">
<img src="image.jpg" alt="Pic 02">
<!-- but the second image also has "Pic 01" instead of "Pic 02" -->
<div class="image_title">Pic 01</div>
</a>
</div>
</div>
</div>
</div>
试试这个:
$(".et_pb_gallery_image .et_overlay").each(function(){
$("<div class='image_title'></div>").insertAfter(this);
var thisImage = $(this).parents('.et_pb_gallery_image').find('img');
var title = thisImage.attr('alt');
$(this).siblings('.image_title').html(title);
});