原生组件js在new对象的时候对象被后new的实例替换

Question

原生组件js在new对象的时候对象被后new的实例替换

发布于
2016-06-14

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.9.1.min.js"></script>
<style>

{padding:0px; margin:0px;}

{list-style:none;}
#oDiv,#oDiv2 {margin:20px;}
.hd li {width:60px;height:35px;border:1px solid #000000;float:left; text-align:center; line-height:35px;cursor:pointer;margin-left:-1px;}
.action {background:red; color:#ffffff;}
.bg {width:181px;height:200px;border:1px solid #000000;}
.bg-1 {display:none;}
</style>
</head>

<body>

<div id="oDiv">
    <ul class="hd">
        <li class="action">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div class="bg">
        <div class="bg-1" style="display:block;">111</div>
        <div class="bg-1">222</div>
        <div class="bg-1">333</div>
    </div>
</div>
<div id="oDiv2">
    <ul class="hd">
        <li class="action">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div class="bg">
        <div class="bg-1" style="display:block;">1112</div>
        <div class="bg-1">2222</div>
        <div class="bg-1">3333</div>
    </div>
</div>
<script>
  $(function() {
      var obj1 = new Tab();
       obj1.init({id : "#oDiv",events : "click"});
       
      var obj2 = new Tab();
       obj2.init({id : "#oDiv2",events : "click"});
  });
   
   function Tab() {
         this.hd = null;//控制层
         this.bg = null;//被控制对象
         this.num = 0;//当前位置
         this.json = {//默认参数
              events : "click",
              delay : 200
         }
   }
   Tab.prototype.init = function(options) {
          $.extend(this.json,options);
       this.hd = $(options.id).find('.hd li');
       this.bg = $(options.id).find('.bg div');
       this.change();
   };
   Tab.prototype.change = function() {
         _this =this;
      var time = null;
          
       this.hd.on(_this.json.events,function() {
           _this.json.num = $(this).index();

           if(_this.json.events == "mouseover") {
                   
               time = setTimeout(function() {
                  show();
                  
               },_this.json.delay);
           } else {
                 show();
           };
           

       }).on('mouseout',function() {
             clearTimeout(time);
       });

      function show() {

           _this.hd.removeClass('action');
           _this.bg.css('display','none');
           _this.hd.eq(_this.json.num).addClass('action');
           _this.bg.eq(_this.json.num).css('display','block');
      }
      
   }
</script>

</body>
</html>

javascript

阅读 3.1k

1 个回答

得票最新

xuecheng

275237

发布于
2016-06-14

✓ 已被采纳

你这里声明的_this是全局的了，后面的实例_this指向变了

撰写回答