显示/隐藏对象的特定 var 键答案

【问题标题】：show/hide specific var keys of an object显示/隐藏对象的特定 var 键
【发布时间】：2015-08-14 21:01:08
【问题描述】：

我有一个要显示名称的对象字符串，一旦单击不同的链接，它将仅显示与其相关的信息。所以如果我点击chunk1，它只会在点击后显示地址。我知道我需要以某种方式将一个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>

【问题讨论】：

点击姓名需要显示地址吗？
是 - 仅当点击名称时

标签： jquery json string key

【解决方案1】：

您需要使用span 或p 等标签包装地址，默认情况下该标签是隐藏的，然后为名称链接创建一个类以将它们全部抓取并绑定一个单击事件，它可以切换下一个span查看地址：

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

【讨论】：