Question

好的，所以我正在阅读我的数据文件的内容，我已经存储了显示宽度，显示高度，图像宽度，图像高度。我试图将这些值存储到变量中，我可以在页面上的其他函数中使用它们。听说全局变量是一个坏主意，我创建了这个对象：

        var slidedata = {dw:null,dh:null,rw:null,rh:null}

我在一个函数中找到了这个部分：

        slidedata.dw = d[o].dispWidth; // How do I do this?

当我alert(slidedata.dw);之后，我得到null，这意味着我还没有改变slidedata.dw的值。我检查过，当我alert(d[o].dispWidth);时，我得到一个OK值（307），所以这不是问题所在。问题是我不知道如何更改slidedata.dw的值。我该怎么做？

完整代码：

 <script type="text/javascript">
    var slidedata = {dw:null,dh:null,rw:null,rh:null}
    function ajaxjson(folder){

    var info = document.getElementById("info-wh");
var hr = new XMLHttpRequest();

hr.open("POST", "gallery_data.php");
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
        var d = JSON.parse(hr.responseText);
        for(var o in d){
            if(d[o].src == $('.image').attr('src')){


               slidedata.dw = d[o].dispWidth; 
    // HERE I'M TRYING TO SET slidedata.dw TO BE d[o].dispWidth
    // d[o].dispWidth RETURNS 307

               slidedata.dh = d[o].dispHeight;
               slidedata.rw = d[o].realWidth;
               slidedata.rh = d[o].realHeight;


              }
            }
         }
       }
     hr.send("folder="+folder);
    }
    </script> 

    </head>

    <body>

    <div id="info-wh"></div>
    <div id="info-cd"></div>
    <script>ajaxjson('slides');</script>
    <script>alert(slidedata.dw);</script> <!-- THIS RETURNS NULL -->
    <img class="image" alt="" border="0" src="slides/slide1.jpg" 
         style="width:400px; height:600px; left:200px; top:25px; position:relative;" />

Answer 1

首先，您不需要事先定义对象的每个属性：

var sldiedata = {};
console.log(slidedata.dw); // undefined

将为您提供与

相同的功能

var slidedata = {
   dw: null
}
console.log(slidedata.dw); // null

由于添加了无关紧要的信息而删除了部分答案。以供参考：

然后你写了
slidedata.dw = d[o].dispWidth)
它充满了拼写错误。也许你的意思是
slidedata.dw = d[0].dispWidth();

Answer 2

好的，所以我终于通过使用jquery.post函数并将async选项设置为false来找到问题的解决方案。感谢任何评论该主题并帮助我学习新内容的人......我希望读者也能这样做。

我刚刚重命名了这个函数，JS看起来像这样：

<script>
  var slidedata = {dw:null, dh:null, rw:null, rh:null};

  function readData(){
     $.ajax({
     async: false, 
     url: 'gallery_data.php',
     success : function(data){   
              var id = $('.image').attr('src');
              id = id.replace('slides/slide','');
              id = id.replace('.jpg','');
              slidedata.dw = data['img' + id].dispWidth;
              slidedata.dh = data['img' + id].dispHeight;
              slidedata.rw = data['img' + id].realWidth;
              slidedata.rh = data['img' + id].realHeight;
          }

     });
  }
</script>

访问函数中的对象属性 - JavaScript

2 个答案: