jQuery befüllen ein div mit Daten-Attribute mit Ajax

Question

Ich habe eine ziemlich einfache Aufgabe, aber ich bin neu in der Arbeit mit AJAX also bitte mit mir.

Ich habe folgende (vereinfachte) HTML-Code:

<div class="column span-4"> 
    <img src="image1"> 
    <h2>Title 1</h2> 
    <p>Excerpt 1</p> 
    <a href="#" class="button package_info" data-title="Title 1" data-img="image1" data-excerpt="Excerpt 1" data-vid="video_url_1">More Info</a> 
</div> 

<div class="column span-4"> 
    <img src="image2"> 
    <h2>Title 2</h2> 
    <p>Excerpt 2</p> 
    <a href="#" class="button package_info" data-title="Title 2" data-img="image2" data-excerpt="Excerpt 2" data-vid="video_url_2">More Info</a> 
</div> 

    <div class="column span-4"> 
    <img src="image1"> 
    <h2>Title 3</h2> 
    <p>Excerpt 3</p> 
    <a href="#" class="button package_info" data-title="Title 3" data-img="image3" data-excerpt="Excerpt 3" data-vid="video_url_3">More Info</a> 
</div> 

<div class="package_overview" style="width:100%;height:100%;top:100%;background:#ffffff;position:fixed;padding:35px;z-index:9999;transition:0.15s ease-out all;"> 
    <div class="package_overview_close"><i class="fa fa-close"></i></div> 
</div> 

Die Idee dabei ist, dass, wenn ein Benutzer auf „Weitere Infos“ klickt, die div „package_overview“ zeigt, und in diesem div die Informationen enthalten in den Datenattributen auf dem Link, auf den sie geklickt haben (dh Datentitel, Datenauszug, Datenimg, Datenvide usw. - es gibt mehr in meinem tatsächlichen Code, aber ich behalte das einfach).

Hier ist meine aktuelle jQuery,

jQuery(function($){ 
     $('a.package_info').click(function(event) { 
     event.preventDefault(); 
     $('.package_overview').css('top','0'); 
    }); 
    $('.package_overview_close').click(function(event) { 
     $('.package_overview').css('top','100%'); 
    }); 

Offensichtlich ist dies öffnet gerade und schließt die div, aber wie kann ich es mit den Daten zu füllen Attributen, wenn der Benutzer darauf klickt?

Answer 1

können Sie Daten() -Methode für data-* verwalten Attribute

$('a.package_info').click(function(e) { 
     e.preventDefault(); 
     $('.package_overview').css('top','0'); 
     var title = $(this).data('title'); 
     var excerpt= $(this).data('excerpt'); 
     $('.package_overview').html('Title : '+ title + '<br/>' + 'Excerpt : ' + excerpt); 
     return false; 
}); 

Answer 2

Verwenden Sie prop, um die Attribute der Ankerverknüpfung zu erhalten, und klicken Sie auf den HTML-Code, der die html() -Funktion verwendet.

$('a.package_info').click(function(event) { 
     event.preventDefault(); 
     $('.package_overview').css('top','0'); 
     var title = $(this).prop('data-title'); 
     var excerpt= $(this).prop('data-excerpt'); 
     . 
     . 
     $('.package_overview').html('Title : '+ title + '<br/>' + 'Excerpt : ' + excerpt); 

    });