Erhalte den Titel eines Bildes und zeige es als HTML mit JQuery an

Question

Ich habe ein img, das fein anzeigt, aber ich möchte jetzt das Bild verstecken (Anzeige: keine) und den Wert seines Titels erhalten und dieses in seinem anzeigen Elternteil div, mit JQuery. Ich bin mir sicher, dass es relativ einfach ist, ich zeichne gerade einen großen Kopf frei.

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

Answer 1

eine ID für das div für diese Zwecke verwenden Sie können den Titel nach dem Bild einfügen wie

$('.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

Sie können den Titel des Bildes erhalten $('#img-id').attr('title'); verwenden und es dann $('#div-id').html($('#img-id').attr('title'));
Hinweis mit der html einstellen verwenden: können Sie die Klasse verwenden auch. Aber es wird alle Div mit der gleichen Klasse ändern. Es wird empfohlen, dass Sie

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