使用 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();