Javascript create next() function OOP way

Javascript create next() function OOP way

本文关键字：function OOP way create next Javascript      更新时间：2023-09-26

我在使用 OOP 方式创建 next（） 函数时遇到问题。

这是小提琴：https://jsfiddle.net/s5e1530c/

"use strict";
var i, j, arr, loop, $;
(function() {
    $ = function(el, context) {
        context = context || document;
        return new obj$(el, context);
    };
    var obj$ = function(el, context) {
        if (context == null) {
            var cl   = context.getElementsByClassName(el),
                loop = cl.length;
            this.length = loop;
            for (i = 0; i < loop; i++) {
                this[i] = cl[i];
            }
        }
        else {
            var cl   = context,
                loop = cl.length;
            this.length = loop;
            for (i = 0; i < loop; i++) {
                this[i] = cl[i];
            }
        }   

       return this;
    };
    obj$.prototype = {
       next : function() {
        if (this.length == 1) {
          return $(this[0], this[0].nextElementSibling);
        }
        return $();
       },
       css : function(obj, data) {
           if (this.length == 1) {
               this[0].style[obj] = data;
           }
           return this;
        }
    };
})();
<div class="child">child</div>
<div class="next">Next</div>
var child     = $("child"),
    nextchild = child.next();
nextchild.css("color", "red");

为什么这段代码不起作用？ 控制台上没有错误。

我的代码有什么问题？

提前感谢...

(function() {
"use strict";
    var i, j, arr, loop, $, Obj$;
$ = function(el, context) {
    context = context || document;
    return new Obj$(el, context);
};
Obj$ = function(el, context) {
  if(typeof el == "object") {
   //take care of objects here

  }
   /*
   why would context be null? It's either context or document
   if (context == null) {
        var cl   = context.getElementsByClassName(el),
            loop = cl.length;
        this.length = loop;
        for (i = 0; i < loop; i++) {
            this[i] = cl[i];
        }
    }
    else {
    */
        var cl   = context.getElementsByClassName(el),
            loop = cl.length;
        this.length = loop;
        for (i = 0; i < loop; i++) {
            this[i] = cl[i];
        }
    //}   

   return this;
};
Obj$.prototype = {
   next : function() {
    //why do equals 1? Do greater than or equal to 1
    if (this.length >= 1) {
      return $(this[0].nextElementSibling);
    }
     //return undefiend not an empty object
    return undefined;
   },
   css : function(obj, data) {
       if (this.length >= 1) {
           this[0].style[obj] = data;
       }
       return this;
    }
};
window.$ = $;
})();
var child  = $("child"),
nextchild = child.next();
nextchild.css("color", "red");

你有很多工作要做，让你的按照你想要的方式工作。首先，你的选择器过程非常弱，第二，你对长度和对象的理解也非常薄弱。

相关文章：