Uncaught TypeError: Cannot read property 'top' of undefined

逆流悲心 2014-12-12 02:22:33

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多图文</title>
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-json-2.4.js"></script>
<script src="js/demo.js"></script>
</head>
<body>

<div class="graphics">
<div class="tw_box box_left">
<div class="body">
<div class="img_fm" id="sBox1">
<div id="fm1" class="gy_bg fmImg">封面图片</div>
<img src="img/pig1.png" class="fmImg" id="img1">
<p class="abstractVal">
<span id="title1">摘要</span>
</p>
<div class="layer_mask">
<a href="javascript:void(0)" class="revise">修改</a>
</div>
</div>
</div>
<div id="sBox2" class="twSBox">
<div class="body clearfix">
<div id="title2" class="info"><p>标题</p></div>
<div class="simg" id="img2">
<div>预览图</div>
</div>
</div>
<div class="layer_mask zzc_sBox2">
<a href="javascript:void(0)" class="revise">修改</a>
<a href="javascript:void(0)" class="del">删除</a>
</div>
</div>
<div class="boxAdd twSBox">
<a href="javascript:void(0)">添加一个图文</a>
</div>
</div>

<div id="box_move" class="tw_box box_left box_body">
<div class="move_count">
<div>
<span>标　　　题：</span>
<input id="title" type="text" onkeyup="syncTitle(this.value)" />
</div>
<div>
<span>封　　　面：</span>
<input type="file" id="picfile" style="width:70px;height:28px;"/>

<input type="text" id="fmSrc" style="width:285px;height:28px;" disabled />
</div>
<div>
<span>关联类型：</span>
<select id="typeID" onchange="changeType(this.value)">
<option value="0">请选择一个关联的类型...</option>
<option value="1">微专题</option>
<option value="2">自定义链接</option>
</select>
</div>
<div id="topics" class="topics">
<span>微　专　题：</span>
<select id="valueID">
<option>圣诞特惠</option>
<option>双十二狂欢</option>
</select>
</div>

<div id="define_link" class="define_link">
<span>自定义链接：</span>
<input type="text" id="urlData" value="http://" />
</div>
<div id="msg"></div>
</div>
<i class="arrow arrow_out"></i>
<i class="arrow arrow_in"></i>
</div>
<div class="clearfix"></div>
</div>

<br>
<br>
<br>

<button onclick="viewJson()">查看json对象</button>
<button onclick="checkJson()">验证数据合法性</button>
<button onclick="loadJsonData()">模拟修改图文json数据</button>
<input id="viewJson" type="text" />

</body>
</html>
JS代码：
//当前编辑的图文ID
var boxIdN = 1;

//一共存在多少个图文
var n=3;
//图文json对象
var tws=[];
var tw=function(){return{"BoxId":"","Title":"","UrlType":"","TopicID":"","Url":"","Description":"","PicUrl":"","Status":""}}
ntw = new tw();
ntw.BoxId = 1;
tws.push(ntw);
ntw = new tw();
ntw.BoxId = 2;
tws.push(ntw);

$(document).ready(function(){
$('#picfile').change(function(){
$('#fmSrc').val($(this).val());
})

$('#sBox1').hover(function(){
$(this).find('.layer_mask').show();
},function(){
$(this).find('.layer_mask').hide();
});

//事件on可以将动态的效果直接添加进来
$('.tw_box').on('mouseenter mouseleave','.twSBox',function(){
$(this).find('.layer_mask').toggle();
});

//删除图文
$('.tw_box').on('click','.del',function(){
if($('.twSBox').length == 2){
alert('请至少保存两个图文信息');
}else{
$(this).parent().parent().remove();
editTW(parseInt(1));
}
});

//追加图文
$('.boxAdd a').click(function(){
if($('.twSBox').length < 10){
var str='<div id="sBox'+n+'" class="twSBox">'+'<div class="body clearfix"><div id="title'+n+'" class="info"><p>标题</p></div><div class="simg" id="img'+n+'"><div>预览图</div></div></div><div class="layer_mask zzc_sBox2"><a href="javascript:void(0)" class="revise">修改</a><a href="javascript:void(0)" class="del">删除</a></div>'+'</div>';
var ntw = new tw();
ntw.BoxId = n;
tws.push(ntw);
n=n+1;
$('.boxAdd').before(str);
}else{
alert('最多可添加10个图文');
}
});

//修改图文
$('.tw_box').on('click','.revise',function(){
var thisId=$(this).parent().parent().attr('id');
thisId=thisId.replace(thisId.substring(0,4),'');
editTW(thisId);
});

});/*$(document).ready(function() end*/

//修改图文
function editTW(sBoxId){
//保存对象到json
saveDataToJson();
boxIdN = sBoxId;
//移动模型
moveBox();
//初始化数据，清空图文
initBox();
//载入模型数据对象
loadData();
}

//修改图文1
function edit(sBoxId){
//保存对象到json
saveDataToJson();
boxIdN = sBoxId;
//初始化数据，清空图文
initBox();
//载入模型数据对象
loadData();
}

//移动
function moveBox(){
var h = $('#sBox' + boxIdN).offset().top;
$('#box_move').animate({top:h+'px'});
// $('#box_move').animate({top:$('#sBox'+boxIdN).offset().top},800);
}

//select联动
function changeType(selectVal){
if('1' == selectVal) {
$("#topics").show();
$("#define_link").hide();
} else if ('2' == selectVal) {
$("#topics").hide();
$("#define_link").show();
}else if('0' == selectVal){
$("#topics").hide();
$("#define_link").hide();
}
}

//初始化数据，清空图文
function initBox(){
$("#title").val("");
$("#picfile").val("");
$("#typeID").val("0");
$("#topics").hide();
$("#define_link").hide();
$("#valueID option").attr("selected","selected");
$("#urlData").val("http://");
}

//保存对象到json
function saveDataToJson(){
for(var a=0; a<tws.length;a++){
if(a+1 == boxIdN){
tws[a].Title = $("#title").val();
tws[a].UrlType = $("#typeID").val();
tws[a].TopicID = $("#valueID").val();
tws[a].Url = $("#urlData").val();
tws[a].PicUrl = $("#fmSrc").val();
}
}
}

//查看Json
function viewJson(){
$("#viewJson").val($.toJSON(tws));
}

//是否为空
function isNull(obj) {
if(null == obj){
return true;
}else {
if("" == obj){
return true;
}
return false;
}
}

//同步标题
function syncTitle(value) {
$("#title"+boxIdN).text(value);
}

//验证Json数据
function check(){
var errorBoxId;
var flag = 1;
for(var a=0;a<tws.length;a++){
errorBoxId = a;
if(isNull(tws[a].Title)){
$("#msg").text("标题不能为空！").show();
flag = 0;
break;
}else if(isNull(tws[a].PicUrl)){
$("#msg").text("请上传一张封面！").show();
flag = 0;
break;
}else if(isNull(tws[a].UrlType) || tws[a].UrlType == 0){
$("#msg").text("请选择一个关联类型！").show();
flag = 0;
break;
}else {
if(1 == tws[a].UrlType && isNull(tws[a].TopicID)){//专题
$("#msg").text("请选择一专题！").show();
flag = 0;
break;
}else if(2 == tws[a].UrlType &&(isNull(tws[a].Url) || "http://" == tws[a].Url)){//URL
$("#msg").text("请填写自定义链接地址！").show();
flag = 0;
break;
}
}
if(flag==0){
edit(parseInt(errorBoxId)+1);
flag = 1;
break;
}else if(errorBoxId<tws.length-1){
edit(parseInt(errorBoxId)+2);
}else{
// edit(parseInt(1));
alert('验证成功');
}
}
}

//验证Json数据函数
function checkJson(){
check();
editTW(boxIdN);
}

//载入模型数据对象
function loadData(){
$("#title").val(tws[boxIdN-1].Title);
$("#fmSrc").val(tws[boxIdN-1].PicUrl);
if(!(isNull(tws[boxIdN-1].UrlType) || 0 == tws[boxIdN-1].UrlType)){
$("#typeID").val(tws[boxIdN-1].UrlType);
switch (tws[boxIdN-1].UrlType) {
case "1"://专题
$("#topics").show();
$("#valueID").val(tws[boxIdN-1].TopicID);
break;

case "2"://URL
$("#define_link").show();
$("#urlData").val(tws[boxIdN-1].Url);
break;
}
}
}

//载入json数据
function loadJsonData(){
tws=[
{"BoxId":"1","Title":"666","UrlType":"2","TopicID":"165545","Url":"http://666","Description":"","PicUrl":"http://www.css88.com/img/gg.gif","Status":""},
{"BoxId":"2","Title":"2222","UrlType":"2","TopicID":"165545","Url":"http://222","Description":"","PicUrl":"","Status":""},
{"BoxId":"3","Title":"333","UrlType":"1","TopicID":"165545","Url":"http://","Description":"","PicUrl":"","Status":""}
];
var len=tws.length;
boxIdN = 1;
loadData();
for(var a=0; a<len;a++){
if(a>=2){

if($('.tw_box .layer_mask').length < 10){
var str='<div id="sBox'+n+'" class="twSBox">'+'<div class="body clearfix"><div id="title'+n+'" class="info"><p>标题</p></div><div class="simg"><div>预览图</div></div></div><div class="layer_mask zzc_sBox2">'+$('.zzc_sBox2').html()+'</div>'+'</div>';
var ntw = new tw();
ntw.BoxId = n;
tws.push(ntw);
n=n+1;
$('.boxAdd').before(str);
}else{
alert('最多可添加10个图文');
}
}
if(!isNull(tws[a].Title)){
$("#title"+(parseInt(a)+1)).text(tws[a].Title);
}
if(!isNull(tws[a].PicUrl)){
$("#img"+(parseInt(a)+1)).attr("src",(tws[a].PicUrl)).show();
}
}
}
当我验证Json数据时，在删除一个图文后验证会出错Uncaught TypeError: Cannot read property 'top' of undefined ，求大神帮我看下代码，非常感谢

...全文

17659 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

逆流悲心 2014-12-12

打赏
举报

引用 3 楼 functionsub 的回复:

[quote=引用 2 楼 u012123393 的回复:] [quote=引用 1 楼 functionsub 的回复:]
function moveBox(){
    if( $('#sBox' + boxIdN).size()){
           var h = $('#sBox' + boxIdN).offset().top;
           $('#box_move').animate({top:h+'px'});
        // $('#box_move').animate({top:$('#sBox'+boxIdN).offset().top},800);
    }
}
代码太长没细看，出错的地方大概是因为选择器没有找到对应的dom，所以offset()方法返回null，再.top就GG思密达了。

能告诉我具体怎么解决么，急求@functionsub[/quote] 我不是已经贴出代码了吗？把你的moveBox替换掉啊。[/quote]谢谢你哈

tony4geek 2014-12-12

打赏
举报

你找找你top 的地方，调试。

functionsub 2014-12-12

打赏
举报

引用 2 楼 u012123393 的回复:

[quote=引用 1 楼 functionsub 的回复:]
function moveBox(){
    if( $('#sBox' + boxIdN).size()){
           var h = $('#sBox' + boxIdN).offset().top;
           $('#box_move').animate({top:h+'px'});
        // $('#box_move').animate({top:$('#sBox'+boxIdN).offset().top},800);
    }
}
代码太长没细看，出错的地方大概是因为选择器没有找到对应的dom，所以offset()方法返回null，再.top就GG思密达了。

能告诉我具体怎么解决么，急求@functionsub[/quote] 我不是已经贴出代码了吗？把你的moveBox替换掉啊。

逆流悲心 2014-12-12

打赏
举报

引用 1 楼 functionsub 的回复:

function moveBox(){
    if( $('#sBox' + boxIdN).size()){
           var h = $('#sBox' + boxIdN).offset().top;
           $('#box_move').animate({top:h+'px'});
        // $('#box_move').animate({top:$('#sBox'+boxIdN).offset().top},800);
    }
}
代码太长没细看，出错的地方大概是因为选择器没有找到对应的dom，所以offset()方法返回null，再.top就GG思密达了。

能告诉我具体怎么解决么，急求@functionsub

functionsub 2014-12-12

打赏
举报

function moveBox(){
    if( $('#sBox' + boxIdN).size()){
           var h = $('#sBox' + boxIdN).offset().top;
           $('#box_move').animate({top:h+'px'});
        // $('#box_move').animate({top:$('#sBox'+boxIdN).offset().top},800);
    }
}

代码太长没细看，出错的地方大概是因为选择器没有找到对应的dom，所以offset()方法返回null，再.top就GG思密达了。