Javascript 创建 next() 函数 OOP 方式答案

【问题标题】：Javascript create next() function OOP wayJavascript 创建 next() 函数 OOP 方式
【发布时间】：2016-02-23 03:47:58
【问题描述】：

我在使用 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");

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

我的代码有什么问题？

提前谢谢......

【问题讨论】：

很多问题，我没有为你做所有的工作，所以去看看我留下了什么。

标签： javascript jquery oop

【解决方案1】：

(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");

要让自己的工作按照自己的方式工作，您还有很多工作要做。一方面您的选择器过程非常薄弱，二您对长度和对象的理解也非常薄弱。

【讨论】：