クリック時にJSONファイルからデータを動的に取得する方法は？

Question

私は約15人のアーティストを含むアーティスト（artists.html）ページを作成しました。今私は各アーティストのプロファイルを1つのHTMLファイルで動的に作成しようとしています。そこで私は別のHTMLファイル（single-artist.html）を作成し、訪問者がクリックしたアーティストのプロフィールを表示します。

artists.html（15組のアーティストのうち、以下の2つの例である）

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

[{ 

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

}, 

{ 

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

}] 

メインアーティストsingle.html

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

data.json。 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"; 
    }); 

});