Question

我创建了一个艺术家（artists.html）页面，其中包括大约15位艺术家。现在我试图通过一个单独的HTML文件动态创建每个艺术家的配置文件。所以我创建了另一个HTML文件（single-artist.html），它将显示访问者点击的艺术家的个人资料。

artists.html（15位艺术家中，以下是两个例子）

    <div class="all-artist" id="artists">
            <div class="col-md-4 col-sm-6 col-xs-6 artist-single" data-number="0">
                <div>
                    <a href="artist-single.html">
                        <img src="img/1.jpg" alt="">
                    </a>
                </div>
            </div> 

            <div class="col-md-4 col-sm-6 col-xs-6 artist-single" data-number="1">
                <div>
                    <a href="artist-single.html">
                        <img src="img/2.jpg" alt="">
                    </a>
                </div>
            </div>

    </div>

artist-single.html

<div id="name"></div>
<div id="logo"></div>
<div id="bio"></div>

data.json

[{

"name": "Arsh",
"logo": "img/logo.jpg", 
"bio": "Arsh is a singer/songwriter"

},

{

"name": "Benz",
"logo": "img/logo.jpg", 
"bio": "Benz is a singer"

}]

main.js

  $('#all_artists artist-single').on('click',function(){
window.location.href="artist-single.html";
var num = $(this).data('number');
$.getJSON('data.json',function(data) {
    $('#name').html(data[num].name);
    $('#description').html(data[num].bio);
    $('#logo').append('<img src=data[num].logo>');
  });
});

现在，当我点击艺术家图片时，它会重定向到artist-single.html，但它不会获取值。也许是因为我重定向并在同一事件上获取值。非常感谢帮助。

Answer 1

$(document).ready(function() {
  var num = $.cookie('num');

  $.getJSON('data.json', function(data) {
    $('#name').html(data[num].name);
    $('#description').html(data[num].bio);
    $('#logo').append('<img src=data[num].logo>');
  });

  $('#artists .artist-single').on('click', function() {
    var num = $(this).data('number');
    $.cookie('num', num);
    window.location.href = "artist-single.html";
  });

});

如何在点击时从JSON文件动态获取数据？

1 个答案: