使用 JQuery 获取图像的标题并将其显示为 HTML

Question

我有一个显示正常的 img，但是我现在想隐藏图像（显示：无）并获取其标题的值并使用 JQuery 将其显示在其父 div 中。 我敢肯定它相对简单，我现在只是在画一个巨大的大脑空白。

<div class="cardBrand image">
  <img class="card-logo" title="Mastercard" src="/hosted/assets/payment-logo/mastercard-debit.png">
</div>

Answer 1

您可以在图像后插入标题，如

 $('.cardBrand.image img').after(function() { return this.title; }).hide();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cardBrand image"> <img class="card-logo" title="Mastercard" src="/hosted/assets/payment-logo/mastercard-debit.png"> </div>

Answer 2

您可以使用$('#img-id').attr('title');获取图像$('#img-id').attr('title'); 然后使用它来设置 html 使用$('#div-id').html($('#img-id').attr('title'));
注意：您也可以使用该类。 但是，它会更改所有具有相同类的 div。 出于这些目的，建议您为 div 使用 id

Answer 3

var image_title=$('.card-logo').attr('title'); // get title of image
$('.card-logo').hide(); // hide image
$('.cardBrand').text(image_title); // set title in parent div

Answer 4

var imgTitle="<span>" + $(".card-logo").attr("title") + "</span>";
$(imgTitle).insertAfter($(".card-logo"));
$(".card-logo").hide();