show/hide 对象的特定 var 键

show/hide specific var keys of an object

我有一个对象字符串,我想显示名称,单击不同的 link 后,它将仅显示与其相关的信息。因此,如果我单击 chunk1,它只会显示一次地址 clicked.I 知道我需要以某种方式将 ID 标记附加到每个 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>

你需要用默认隐藏的spanp等标签包裹地址,然后为名称link创建一个class以抓住它们并绑定一个点击事件,它切换下一个跨度的可见性以查看地址:

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