Question

我认为这是我遇到的jQuery和javascript中的另一个技巧变量范围和ajax问题。

说我有一个对象：

Container = function()
{
//CSS Style Paramaters:
    this.width = "";
    this.height = "";
    this.margin = "";
    this.margin_option = "";
    this.position = ""; 
}

我有一个这个对象的方法，应该从xml文件读取一些xml数据并将它们存储到这个对象的成员中：

Container.prototype.readXML4Container =function()
{
            var self = this;
        $.get("assest/xml/layout.xml",function(xml)
        {
                  $(xml).find("body").each(function(){
                     self.width = ($(this).find("width").text());
                     self.height = ($(this).find("height").text());
                     self.margin = ($(this).find("margin").text());
                     //And more code like this.
        });
       });
}

在此函数之后，还有另一个函数需要调用它，并使用.css（）

应用CSS数据

Container.prototype.applyCSS = function()
{
    this.readXML4Container();

    $("#container").css({
        'width':this.width,
        'height':this.height,
        'position':this.position,
        'margin': this.margin
    });

}

XML文件如下所示：

<?xml version="1.0" encoding="utf-8" ?>

<root>
<body>
    <margin>0</margin>
    <padding>0</padding>
    <font-family>Trebuchet MS, sans-serif</font-family>
    <color>#666</color>
</body> 
<container>
    <width>1220px</width>
    <height>730px</height>
    <margin>0 auto</margin>
    <position>relative</position>
    <font-size>1.0em</font-size>
    <font-color>blue</font-color>
</container>


<Menubar>
    <width>660px</width>
    <height>58px</height>
    <position>absolute</position>
    <left>275px</left>  
</Menubar>

<Mainsection>
    <width>664px</width>
    <height>660px</height>
    <position>absolute</position>
    <position-left>270px</position-left>
    <position-top>60px</position-top>   
</Mainsection>
</root>

我的问题是，似乎该值从未存储在成员变量中。当我创建该对象的实例并调用两个函数时，CSS样式永远不会应用到HTML中的DOM中。

但是，如果我不读取XML文件但只是在开头给出一些值，它就可以正常工作。所以我知道我的applyCSS部分应该是好的。问题应该是阅读和存储阶段。

我试图解决这个问题超过一天......任何人都可以帮我解决这个问题吗？谢谢！

Answer 1

嗯，让我们看看。你有大约3个问题。

1）self.margin = ($(this).find("margin).text());

你错过了保证金的收盘双重报价

2）您的XML无效：<position-left>275px</left>

3）最后一个大问题：记住，你正在使用AJAX。不要忘记A代表什么:)。你的功能是这样的：

    this.readXML4Container();

        $("#container").css({
            'width':this.width,
            'height':this.height,
            'position':this.position,
            'margin': this.margin
        });

But readXML4Container is ASYNCHRONOUS. So you call your readXML method and then immediately try to apply the CSS, but the css hasn't been loaded yet from the server.

你应该只有这样一个函数：

 Container.prototype.readXML4Container =function()
        {
            var self = this;
            $.get("XMLFile1.xml",function(xml)
            {                
                $(xml).find("body").each(function () {

                    self.width = ($(this).find("width").text());
                    self.height = ($(this).find("height").text());
                    self.margin = ($(this).find("margin").text());
                });

                $("#container").css({
                    'width': self.width,
                    'height': self.height,
                    'position': self.position
                });
            });
        }

当然，你还有其他问题，比如为什么你有两个身体标签？只适用最后一个。当然，你的身体XML甚至没有宽度和高度的“拥有”属性......

Answer 2

我几次遇到过这个问题。我通常设计的Javascript类略有不同，并且从未遇到过使用此方法的范围问题。

以下示例执行您想要的操作（使用一些虚拟数据，在虚拟Ajax请求和循环中以满足范围问题）。它还创建了两个带有随机数据的对象，以测试它们是否未静态存储在原型中。超时是为了确保在输出数据之前完成Ajax请求。 http://jsfiddle.net/wERTp/16/

var Container = function()
{
};

Container.prototype = {    
    width: '',
    height: '',
    margin: '',
    margin_option: '',
    position: '',

    readXML4Container: function()
    {
        $.get("", this.saveValues.bind(this));
    },

    saveValues: function(xml) {
        var self = this;
        var values = [{
            width: 10 + Math.random(),
            height: 10 + Math.random(),
            margin: 10 + Math.random(),
            margin_option: '',
            position: 'relative'
        }];
        $.each(values, function() {
            self.width = this.width;
            self.height = this.height;
            self.margin = this.margin;
            self.margin_option = this.margin_option;
            self.position = this.position;
        });
    },

    outputValues: function() {
        console.log(this.width, this.height, this.margin, this.margin_option, this.position);
    }
}

var container = new Container();
container.readXML4Container();
setTimeout(function() {
    container.outputValues();
}, 1000);

var container2 = new Container();
container2.readXML4Container();
setTimeout(function() {
    container2.outputValues();
}, 1000);

如何使用.get（）函数将从XML读取的值存储到本地对象的成员

2 个答案: