获取图像的 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);
});