使用json后的click没有效果,该如何解决
使用json后的click没有效果
如标题所说，在使用json解析后，用click没有反应
。同时也希望可以循环输出键值对，并判断是否为空，空的跳过，输出下一个值
------解决思路----------------------
$(".content-box-li").on("click", function () {
改为
$(".content-box").on("click", ".content-box-li", function () {
------解决思路----------------------
首先你文档里面没有class为content-text的元素，执行后也没效果
其次，测试过文档没有问题，把注释部份显示后单击有反应
另外，遍历JSON对象：
$.each(data, function (infoIndex, info) {
for (var name in info) {
alert(name + ":" + info[name]);
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="js/jquery-2.1.4.min.js"></script>
<!--[if lte IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<title></title>
<style>
#content .content-box {
padding: 0 90px 70px 90px;
}
#content .content-box .content-box-li {
width: 245px;
height: 100%;
margin: 20px 0;
background-color: white;
box-shadow: 5px 5px 0 0 #C9CACA;
list-style-type: none;
}
#content .content-box .content-box-li .content-box-title {
display: block;
width: 250px;
height: 50px;
line-height: 50px;
background-color: #37BCB8;
font-size: 29px;
box-shadow: 5px 5px 0 0 #999;
margin: -5px 0 0 -5px;
}
#content .content-box .content-box-li .content-box-title i {
display: block;
font-size: 40px;
float: left;
padding: 5px 30px 5px 15px;
}
#content .content-box .content-box-li .sub-title {
color: #5B5757;
text-align: left;
padding: 15px;
font-size: 24px;
}
#content .content-box .content-box-li .sub-ul {
position: relative;
margin: 0 0 30px 15px;
}
#content .content-box .content-box-li .sub-ul li {
color: #5B5757;
list-style-type: decimal;
font-size: 24px;
line-height: 42px
}
.job-info {
display: none;
}
</style>
<script>
$(document).ready(function () {
$.getJSON("json/rec-intro.json", function (data) {
var $jsontip = $(".content-text");
var strHtml = "";//存储数据的变量
$jsontip.empty();//清空内容
$.each(data, function (infoIndex, info) {
strHtml += info["rec-intro"];
});
$jsontip.html(strHtml);//显示处理后的数据
})
$.getJSON("json/rec-info.json", function (data) {
var strHtml = "";//存储数据的变量
$(".content-box").empty();//清空内容
$.each(data, function (infoIndex, info) {
strHtml += "<li class='content-box-li'><span class='content-box-title'><i class='icon-mune'></i>" + info["rec-job"] + "</span><i class='right-btn icon-up' style='display: none'></i>";
strHtml += "<div class='job-info'><p class='sub-title'>职位描述：</p><ul class='sub-ul'><li>" + info["rec-des-1"] + "</li></ul>";
strHtml += "<p class='sub-title'>任职要求：</p><ul class='sub-ul'><li>" + info["rec-needs-1"] + "</li></ul></div></li>";
});
$(strHtml).appendTo(".content-box");//显示处理后的数据
})
/* $(".content-box").append(
"<li class='content-box-li'>" +
"<span class='content-box-title'><i class='icon-mune'></i>社区运营</span>" +
"<i class='right-btn icon-up' style='display: none'></i>" +
"<div class='job-info'>" +
"<p class='sub-title'>职位描述：</p>" +
"<ul class='sub-ul'>" +
"<li>负责各个圈子社区的运营策划，维护和活跃社区用户；</li>" +
"</ul>" +
"<p class='sub-title'>任职要求：</p>" +
"<ul class='sub-ul'>" +
"<li>大专及以上学历；</li>" +
"</ul></div></li>"
)*/
var fl = new Array();
var length = $(".content-box-li").length;
for (var i = 0; i < length; i++) {
fl[i] = false;
}
$(".content-box-li").on("click", function () {
var index = $(this).index();
if (fl[index] == false) {
$(".icon-mune").eq(index).animate({"padding-right": 30}, "slow", function () {
$(".content-box-title").eq(index).css({"background-color": "#2d9c99"});
});
$("#content .content-box .content-box-li").eq(index).animate({"width": "100%"}, "slow", function () {
$(".right-btn").eq(index).css("display", "");
$(".job-info").eq(index).slideDown("slow");
fl[index] = true;
});
} else if (fl[index] == true) {
$(".job-info").eq(index).slideUp("slow", function () {
$(".right-btn").eq(index).css("display", "none");
$("#content .content-box .content-box-li").eq(index).animate({"width": 245}, function () {
$(".icon-mune").eq(index).animate({"padding-right": 10}, "slow", function () {
$(".content-box-title").eq(index).css({"background-color": "#37BCB8"});
});
});
fl[index] = false;
});
}
});
})
</script>
</head>
<body style="background-color: #f7f6f6">
<div id="content">
<ul class="content-box clear"></ul>
</div>
</body>
</html>
rec-intro.json
[
{
"rec-job": "测试工程师",
"rec-des-1": "上",
"rec-des-2": "中",
"rec-des-3": "下",
"rec-des-4": "左",
"rec-needs-1": "zhangguoli@123.com",
"rec-needs-2": "zhangi@123.com",
"rec-needs-3": "zhangguoli@123.com",
"rec-needs-4": ""
},
{
"rec-job": "测试工程师",
"rec-des-1": "男",
"rec-des-2": "男",
"rec-des-3": "",
"rec-des-4": "男",
"rec-needs-1": "zhangguoli@123.com",
"rec-needs-2": "",
"rec-needs-3": "zhangguoli@123.com",
"rec-needs-4": "zhangguoli@123.com"
}
]
如标题所说，在使用json解析后，用click没有反应
------解决思路----------------------
$(".content-box-li").on("click", function () {
改为
$(".content-box").on("click", ".content-box-li", function () {
------解决思路----------------------
首先你文档里面没有class为content-text的元素，执行后也没效果
其次，测试过文档没有问题，把注释部份显示后单击有反应
另外，遍历JSON对象：
$.each(data, function (infoIndex, info) {
for (var name in info) {
alert(name + ":" + info[name]);
}
});