Javascript jQuery使用Ajax用数据属性填充div

我有以下（简化的）html代码：

<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>

---

显然，这只是打开和关闭div，但是当用户单击它时，我如何用数据属性填充它？

使用prop获取单击的锚链接属性，并使用html（）函数填充其中的html

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

  });

$（'a.package_info'）。单击（函数（事件）{
event.preventDefault（）；
$（'package_overview'）.css（'top'，'0'）；
var title=$（this.prop（'data-title'）；
var摘录=$（this.prop（'data-extract'）；
.
.
$（'.package_overview'）.html（'Title:'+Title+'
'+'摘录：'+extract'）；
});

使用prop获取单击的锚定链接的属性，并使用html（）函数填充其中的html

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

  });

$（'a.package_info'）。单击（函数（事件）{
event.preventDefault（）；
$（'package_overview'）.css（'top'，'0'）；
var title=$（this.prop（'data-title'）；
var摘录=$（this.prop（'data-extract'）；
.
.
$（'.package_overview'）.html（'Title:'+Title+'
'+'摘录：'+extract'）；
});

您可以使用data（）方法来管理

数据-*

属性

$('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;
});

$（'a.package_info'）。单击（函数（e）{
e、 预防默认值（）；
$（'package_overview'）.css（'top'，'0'）；
var title=$（this.data（'title'）；
var摘录=$（this）.data（'摘录'）；
$（'.package_overview'）.html（'Title:'+Title+'
'+'摘录：'+extract'）；
返回false；
});

您可以使用data（）方法来管理

数据-*

属性

$('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;
});

$（'a.package_info'）。单击（函数（e）{
e、 预防默认值（）；
$（'package_overview'）.css（'top'，'0'）；
var title=$（this.data（'title'）；
var摘录=$（this）.data（'摘录'）；
$（'.package_overview'）.html（'Title:'+Title+'
'+'摘录：'+extract'）；
返回false；
});