Question

我正在尝试创建我的第一个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);

并在init进程结束时，我用

淡出StateControl

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

---这有效---

但现在，当用户点击名为“加载形状”的radioButton时，我需要更改StateControl的文本。我希望StateControl fadeIn()立即将“加载形状”作为文本，然后fadeOut(3000)加载形状时。我知道如何使用fadeIn()和fadeOut()，但我不知道如何更改文字，加载形状时仍会显示“加载地图”。

我试过

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

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

我该怎么做？

Answer 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...
}

Javascript基本原型 - 无法更新属性

1 个答案: