Uncaught TypeError: Cannot read property 'top' of undefined

时间：2022-12-02 08:25:59
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对象。-->                
       <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 ，求大神帮我看下代码，非常感谢

5 个解决方案

#1

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思密达了。

#2

引用 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

#3

引用 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

我不是已经贴出代码了吗？把你的moveBox替换掉啊。

#4

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

#5

引用 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

我不是已经贴出代码了吗？把你的moveBox替换掉啊。
谢谢你哈

#1

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思密达了。

#2

引用 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

#3

引用 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

我不是已经贴出代码了吗？把你的moveBox替换掉啊。

#4

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

#5

引用 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

我不是已经贴出代码了吗？把你的moveBox替换掉啊。
谢谢你哈
标签：

相关文章