2

これは、私が出会った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 の部分が適切であることはわかっています。問題は、読み取りおよび保存段階にあるはずです。

私はこの問題を1日以上解決しようとしています....これについて誰か助けてもらえますか? ありがとうございました！

4

2 に答える 2

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.

あなたは本当にこのような1つの関数を持っているべきです：

 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
                });
            });
        }

もちろん、他にも問題があります。たとえば、ボディタグが2つあるのはなぜですか。最後のものだけが適用されます。そしてもちろん、あなたの体のXMLは、幅と高さのプロパティさえ「持っていない」...

于 2012-08-30T21:55:08.920 に答える
0

私はこの問題に何度か遭遇しました。私は通常、Javascript クラスをわずかに異なる方法で設計しており、この方法でスコーピングの問題を経験したことはありません。

以下の例は、あなたが望んでいることを行います (スコープの問題に対応するために、ダミーの Ajax リクエストとループでいくつかのダミー データを使用します)。また、ランダム化されたデータを使用して 2 つのオブジェクトを作成し、それらがプロトタイプに静的に格納されていないことをテストします。タイムアウトは、データを出力する前に 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);​
于 2012-08-30T21:50:28.597 に答える