JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" data-pays="IT" class="pays">Italie</a>
<a href="#" data-pays="FR" class="pays">France</a>
<a href="#" data-pays="BE" class="pays">Belgique</a>
JavaScript
var country = { "data" :[
{
"code": "FR",
"name": "FRANCE",
"img": [
{
"OUTPUT":"\/img\/fr-output.png",
"DEMAND":"\/img\/fr-demand.png",
"LABOUR":"\/img\/fr-labour.png",
"PRICES":"\/img\/fr-price.png",
"EXTERNAL TRANSACTIONS":"\/img\/fr-ext.png",
"FINANCIAL":"\/img\/fr-financial.png",
}
]
},
{
"code": "IT",
"name": "ITALY",
"img": [
{
"OUTPUT":"\/img\/it-output.png",
"DEMAND":"\/img\/it-demand.png",
"LABOUR":"\/img\/it-labour.png",
"PRICES":"\/img\/it-price.png",
"EXTERNAL TRANSACTIONS":"\/img\/it-ext.png",
"FINANCIAL":"\/img\/it-financial.png",
}
]
},
{
"code": "BE",
"name": "BELGIQUE",
"img": [
{
"OUTPUT":"\/img\/be-output.png",
"DEMAND":"\/img\/be-demand.png",
"LABOUR":"\/img\/be-labour.png",
"PRICES":"\/img\/be-price.png",
"EXTERNAL TRANSACTIONS":"\/img\/be-ext.png",
"FINANCIAL":"\/img\/be-financial.png",
}
]
},
{
"code": "DE",
"name": "GERMANY",
"img": [
{
"OUTPUT":"\/img\/de-output.png",
"DEMAND":"\/img\/de-demand.png",
"LABOUR":"\/img\/de-labour.png",
"PRICES":"\/img\/de-price.png",
"EXTERNAL TRANSACTIONS":"\/img\/de-ext.png",
"FINANCIAL":"\/img\/de-financial.png",
}
]
},
]}
$( function(){
$('.pays').on('click', function(e){
e.preventDefault();
selCode=$(this).data('pays');
selPays=$.grep(country.data, function(obj) {
return obj.code === selCode;
});
console.log(selPays[0].img[0].OUTPUT)
})
})