показать/скрыть определенные ключи var объекта

Question

У меня есть строка объекта, которую я хочу показать, и после нажатия на другую ссылку будет отображаться только информация, относящаяся к ней. Поэтому, если я щелкнул chunk1, он будет отображать только один адрес после щелчка. Я знаю, что мне нужно каким-то образом добавить идентификационный тег для каждого href, но я не могу заставить его работать. Любые идеи, как заставить его функционировать правильно.

$(document).ready(function() { 
 

 
var jsonp = '[{"Name":"Chunk1", "address":"99 west blvd"},{"Name":"Chunk2","address":"xavier holway park 2344" }]'; 
 
    // var jsonp2 = '[{"address":"123"},{"address":"456"}]'; 
 
    var sName = ''; 
 
    var obj = $.parseJSON(jsonp); 
 
    //var obj1 = $.parseJSON(jsonp2); 
 
    $.each(obj, function() { 
 
     sName += '<p>'; 
 
     sName += '<a href="#">'; 
 
     sName += this['Name'] + "<br/>"; 
 
     sName += '</a>'; 
 
     sName += this['address'] + "<br/>"; 
 
     sName += '</p>'; 
 
     
 
     
 

 
    }); 
 

 
$('span').html(sName); 
 
$('a').click(function (obj) { 
 
alert("this"); 
 

 
}); 
 
    
 
});

body { 
 
    font-family: Arial; 
 
    font-size: 12pt; 
 
    padding : 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<span></span>

Answer 1

Вам нужно обернуть адрес с меткой такой как span или p, которая скрыта по умолчанию, а затем создать класс для ссылки имя, чтобы захватить их и привязать событие щелчка где он переключает видимость следующего диапазона для просмотра адреса:

$(document).ready(function() { 
 

 
var jsonp = '[{"Name":"Chunk1", "address":"99 west blvd"},{"Name":"Chunk2","address":"xavier holway park 2344" }]'; 
 
    // var jsonp2 = '[{"address":"123"},{"address":"456"}]'; 
 
    var sName = ''; 
 
    var obj = $.parseJSON(jsonp); 
 
    //var obj1 = $.parseJSON(jsonp2); 
 
    $.each(obj, function() { 
 
     sName += '<p>'; 
 
     sName += '<a href="#" class="nameLink">'; 
 
     sName += this['Name'] + "<br/>"; 
 
     sName += '</a><span style="display:none">'; 
 
     sName += this['address'] + "</span><br/>"; 
 
     sName += '</p>'; 
 
     
 
     
 

 
    }); 
 

 
$('span').html(sName); 
 
    /* $('a').click(function (obj) { 
 
alert("this"); 
 

 
});*/ 
 

 
$(".nameLink").click(function(){ 
 

 
$(this).next().toggle(); 
 
}); 
 
    
 
});

body { 
 
    font-family: Arial; 
 
    font-size: 12pt; 
 
    padding : 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<span></span>