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>
你需要用默认隐藏的span
或p
等标签包裹地址,然后为名称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>
我有一个对象字符串,我想显示名称,单击不同的 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>
你需要用默认隐藏的span
或p
等标签包裹地址,然后为名称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>