Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

javascript - 普通 Javascript 插件在控制台中返回错误

In lại Tác giả: Walker 123 更新时间：2023-11-28 08:02:00 31 4
mua khóa gpt4 Nike

我是 javascript 的新手，所以我需要一些帮助。
我正在尝试制作一个简单的插件(当然只是为了学习，以便更好地理解事物)，但我遇到了一些麻烦，我将不胜感激。
我的插件是基本的，我正在尝试为 scroll 上的一些内容设置动画，所以这是我的代码:
JS:

(chức năng() {
  //=============================
  //=======CONSTRUCTOR===========
  //=============================
  this.hAnimate = function() {
    this.hanimate = null;
    this.el = null;


    //default options
    var defaults = {
      class : 'hanimate'
    }

   // Create options and extend defaults
   if (arguments[0] && typeof arguments[0] === "object") {
     this.options = extendDefaults(defaults, arguments[0]);
   }

  }
  //==============================
  //===========FUNCTIONS==========
  //==============================

  hAnimate.prototype.init = function() {

    window.addEventListener('scroll' , function(){
      this.el = document.querySelector(this.options.class);
    var distanceY = window.pageYOffset || document.documentElement.srollTop,
        scrollDelay = this.el.getAttribute('data-scroll');

        if ( distanceY > scrollDelay ){
          this.el.classList.add('scrolled');
        }
        khác{
          if(this.el.classList.contains('scrolled')){
            this.el.classList.remove('scrolled')
          }
        }
     });
   }
  function extendDefaults(source, properties) {
    var property;
    for (property in properties) {
      if (properties.hasOwnProperty(property)) {
        source[property] = properties[property];
      }
    }
    return source;
  }

}());

HTML:


    
This is my header

  
  


  
  
  
     window.onload = function(){
       new hAnimate().init();
     }

和 CSS:

.wrapper{
  chiều rộng: 80%;
  lề:0 tự động;
  min-height:5000px}

.hanimate{
  vị trí: cố định;
  đỉnh: 0;
  trái: 0;
  chiều rộng: 100%;
  height:5em;
  hiển thị:flex;
  căn chỉnh các mục:giữa;
  justify-content:center;
  background:#f2f2f2;
}

[data-effect='bg-red']{
  transition:background .7s;
}
.scrolled[data-effect='bg-red']{
  nền: đỏ;
}

所以当我尝试运行它时，它在控制台中给我一个错误

ReferenceError: options is not defined

this.el = document.querySelector(this.options.class);

演示 đây

gia hạn
所以我做了一些研究，但我就是想不通，我是初学者，我知道，但我就是不明白，这是我更新的代码:

// Create an immediately invoked functional expression to wrap our code
;(function(window) {
  'sử dụng nghiêm ngặt';
  function extend( a, b ) {
        for( var key in b ) {
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }
  // Define our constructor
   function hAnimate(el, options) {
     this.el = document.querySelector(el);
     this.options = extend( this.defaults, options );
     this.init();
  }

  hAnimate.prototype = {
    defaults : {
            classToAdd : 'scrolled'
        },
    init: function() {
      window.addEventListener('scroll', function(){
          var self = this,
              distanceY = window.pageYOffset || document.documentElement.scrollTop,
              scrollDel = 100;

          if (distanceY > scrollDel) {
            this.el.classList.add(this.options.classToAdd);
          } khác {
              if (this.el.classList.contains(this.options.classToAdd)) {
                this.el.classList.remove(this.options.classToAdd);
              }
          }
      });
  }

}
window.hAnimate = hAnimate;

})(cửa sổ);


document.addEventListener('DOMContentLoaded', function() {
  //var el = document.querySelector('.hAnimate');
  new hAnimate('.hanimate', {classToAdd : 'green'});
});

错误是

TypeError: this.el is undefined, i tried self.el too but don't work either.
Instead this work :

// Create an immediately invoked functional expression to wrap our code
;(function(window) {
  'sử dụng nghiêm ngặt';
  function extend( a, b ) {
        for( var key in b ) {
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }
  // Define our constructor
   function plugin(el, options) {
     this.el = document.querySelector(el);
     this.options = extend( this.defaults, options );
     this.init();
  }

  plugin.prototype = {
    defaults : {
            color : 'red'
        },
    init: function() {
      this.el.style.color = this.options.color;
  }

}
window.plugin = plugin;

})(cửa sổ);

document.addEventListener('DOMContentLoaded', function() {

//var el = document.querySelector('.plugin');
new plugin('.plugin', {color: 'blue'});

});


我希望有人能给我一些建议，我真的很想熟悉 javascript

câu trả lời hay nhất

正如我在评论中所说，您遇到的问题类似于 cái này .

简单地说，当您定义事件处理程序时，cái này 指的是事件发生的元素，而不是您的对象。如果您不想重写代码，对您来说简单的解决方法是在定义 init 行为时创建一个引用对象的别名。

hAnimate.prototype.init = function() {
    var obj = this;
    window.addEventListener('scroll' , function(){
        ....
    }
}

因此，在定义为滚动事件处理程序的函数中，obj 将引用 hAnimate 实例，而 cái này 将引用一个元素。因此，您需要做的就是用“obj”替换所有相关的“this”。

但是您的代码中还有另一个错误，确切地说是这一行:

this.el = document.querySelector(this.options.class);

giả thuyết this.options.class 只包含类名，将它用作 querySelector 不会产生任何结果(因为它会被解释为标签名而不是类名)。使用这个:

obj.el = document.getElementsByClassName(obj.options.class)[0];

其中 [0] 用于仅获取第一个元素。请注意，您更愿意使用#id，但这取决于您。

这里修改了vĩ cầm

注意:它在 jsfiddle 上对我不起作用，但话又说回来，什么都不是。我想知道为什么。不过它在本地主机上运行良好。

关于javascript - 普通 Javascript 插件在控制台中返回错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29708181/

31 4 0
Đề xuất bài viết: javascript - 使用 UJS 动态向表添加行
Đề xuất bài viết: javascript - jQuery "fly out"菜单上的单击事件
Đề xuất bài viết: html - Mobile Safari iPad 中视频元素的垂直居中位置为 "full screen"
Đề xuất bài viết: jquery - 如何为 JQuery 指定的元素定义样式？
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress