Question

我是Javascript Classes的新手，或者缺乏对类的真正支持。

无论如何，我想创建一个可以创建和销毁DOM元素的函数。我没有创建元素但是破坏它们有点棘手。

如何在不提供身份证的情况下致电销毁？

function WorkZone() {
    this.create = function(id) {
        $('<div>', {
            id: id,
            class: 'work-zone'
        }).appendTo('body');
    }

    this.destroy = function(id) {
        $(id).remove();
    }
}

$(function() {
    var zone = new WorkZone();
    zone.create();
    zone.destroy();
});

Answer 1

您只需要将元素引用作为对象的属性。然后destroy方法直接引用元素，你甚至不需要id。

function WorkZone() {

    this.create = function(id) {

       // Remember the element
        this.element = $('<div>', {
                         id: id,
                         class: 'work-zone'
                       });
        // This could be chained to the above,
        // but it's a lot easier to read if it isn't
        this.element.appendTo('body');
    }

    this.destroy = function() {
        // Use element reference
        this.element.remove();
    }
}

$(function() {
    var zone = new WorkZone();
    zone.create();
    zone.destroy();
});

但是你最好把这些方法放在WorkZone.prototype上，这样它们就可以共享了，而不是每个实例都有自己的副本：

function WorkZone() {
  this.element;
}

WorkZone.prototype = {
  create: function(id) {
    this.element = $(..)...// create element, add to document
  },
  destroy: function() {
    this.element.remove();
  }
}

var zone = new WorkZone();
zone.create(id);
zone.destroy();

Answer 2

试试这个：

var WorkZone = {
    wz: null,
    create: function(id) {
        this.wz = $('<div>', {
            id: id,
            class: 'work-zone'
        }).appendTo('body');
    },

    destroy: function() {
        this.wz.remove();
    }
}

$(function() {
    var zone = WorkZone;
    zone.create('new_id');
    zone.destroy();
});

Answer 3

像这样：

function WorkZone() {
    this.create = function(id) {
        this.div = $('<div>', {
            id: id,
            class: 'work-zone'
        });
        this.div.appendTo('body');
    }

    this.destroy = function(id) {
         this.div.remove();
    }
}

Answer 4

使用jQuery代替创建自定义代码：

http://api.jquery.com/category/manipulation/

您将获得完整的浏览器支持和最佳代码，并能够使用许多不同类型的选择器进行这些类型的DOM操作。

Answer 5

function WorkZone(id) {
    this.create = function() {
        $('<div>', {
            id: id,
            class: 'work-zone'
        }).appendTo('body');
    }

    this.destroy = function() {
        $('#'+id).remove();
    }
}

$(function() {
    var zone = new WorkZone("ohyeababy");
    zone.create();
    zone.destroy();
});

这不是实现最终目标的最佳方式，但它是代码中重复的直接修复。：）

Javascript类：创建和销毁元素

5 个答案: