1

我正在尝试创建我的第一个 Javascript“原型”。它包括创建一个放置在谷歌地图 V3 上的标签，我在其中写的想法就像在长时间操作期间“加载标记”。
但是，我想“重用”我的原型并更改写入的文本。“加载标记”可以在形状加载操作等过程中变成“加载形状”……

这是我到目前为止所写的：

StateControl.prototype.text_ = null;

// Define setters and getters for this property
StateControl.prototype.getText = function () {
    return this.text_;
}

StateControl.prototype.setText = function (text) {
    this.text_ = text;
}

/** @constructor */
function StateControl(controlDiv, map, text) {

    var control = this;
    control.text_ = text;

    controlDiv.style.padding = '5px';

    // Set CSS for the control border
    var stateUI= document.createElement('div');
    //some css properties like stateUI.style.backgroundColor = 'black'
    controlDiv.appendChild(stateUI);

    // Set CSS for the control interior
    var goHomeText = document.createElement('div');
    stateUI.id = 'stateControl';
    //some css properties like stateText.style.color = 'white';
    stateText.innerHTML = '<strong>' + this.text_ + '</strong>';
    stateUI.appendChild(stateText);
}

当我初始化我的谷歌地图时，我这样称呼我的原型：

var stateControlDiv = document.createElement('div');
var stateControl = new StateControl(stateControlDiv, map, "Loading the map");
stateControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(stateControlDiv);

在初始化过程结束时，我将 StateControl 淡出

$("#stateControl").fadeOut(3000);

--- 这有效---


但是现在，我需要更改StateControl用户单击名为“加载形状”的单选按钮时的文本。我想StateControl fadeIn()立即将“加载形状”作为文本，然后fadeOut(3000)在加载形状时。我知道如何使用fadeIn()and fadeOut()，但我不知道如何更改文本，并且在加载形状时仍然出现“加载地图”。

我试过了

homeControl = StateControl.prototype.setText("Loading the shapes");

在我的loadShapes()方法中，但只有当我StateControl用好的文本创建一个新的时它才有效……但这是一种浪费，我只需要更新text_属性。

我怎样才能做到这一点 ？

4

1 回答 1

1

您似乎对原型的东西以及在 javascript 中创建的对象感到困惑。我将尝试做简短的介绍。

在 javascript 中，我们有时将函数用作构造函数，就像您正确所做的那样：

function StateControl(controlDiv, map, text) {
    // body
}

通过构造函数，您可以使用new关键字创建实例：

var myStateControl = new StateControl(stateControlDiv, map, "Loading the map");

简而言之，有两种方法，如何为实例添加属性。使用this构造函数内部的关键字或构造函数的prototype属性。区别很简单。每次创建新实例时都会调用构造函数，但原型只需定义一次。

重要的是，原型属性必须在构造函数之后定义：

function StateControl(controlDiv, map, text) {
}

StateControl.prototype.getText = function () {
    return this.text_;
}

StateControl.prototype.setText = function (text) {
    this.text_ = text;
}

由于您在每个实例中都定义了文本，因此您不必为StateControl.prototype.text_ = null;.

我不知道您的代码的其余部分如何，但请尝试稍微改变您的方法。您需要更改某些 html 中的文本，因此您需要从实例连接到该 html 元素。你也有getter和setter，但是没有它们就可以访问实例属性......

function StateControl(controlDiv, map, text) {
    this.text_ = text;
    //so lets just make stateText as a property of this
    this.stateText = document.createElement('p');

    controlDiv.style.padding = '5px';

    // Set CSS for the control border
    var stateUI= document.createElement('div');
    //some css properties like stateUI.style.backgroundColor = 'black'
    controlDiv.appendChild(stateUI);

    // Set CSS for the control interior
    var goHomeText = document.createElement('div');
    stateUI.id = 'stateControl';
    //some css properties like stateText.style.color = 'white';
    this.stateText.innerHTML = '<strong>' + this.text_ + '</strong>';
    stateUI.appendChild(this.stateText);
}

// and lets make method that will be able to change state text...
StateControl.prototype.setStateText = function (text) {
    this.text_ = text;
    this.stateText.innerHTML = '<strong>' + this.text_ + '</strong>';
};

// then somewhere in the code... 
$("#loadShapes").on("click", function() {
    stateControl.setStateText("Loading the shapes");
    $("#stateControl").fadeIn...
}
于 2013-11-14T14:03:16.267 回答