2

我从不擅长 JavaScript 或 jquery，但我的最新项目要求我变得更好。我正在尝试为网站创建一个小部件。此小部件使用 ajax 从另一个域访问 json 数据。此小部件可能在同一页面上有多个实例，每个实例具有不同的设置。

我正在使用 JQuery 来查找具有特定类的所有元素，该类将识别小部件需要去哪里。我正在使用自定义数据属性将每个小部件的设置存储在容器中。

我遇到的问题是这个；

因为 ajax 请求是异步的，所以结果以有效的随机顺序出现。我到目前为止的代码是

<script>
    var currentContainer;
    $(document).ready(function(){
        $($(".container")).each(function( index ){ 
                currentContainer = this;
                var url = 
                    "http://example.com/json.php?iid="+$(this).data("owner_id")+
                    "&iid="+$(this).data("item_id")+
                    "&l="+$(this).data("layout")+
                    "&callback=?";

                var request = $.get(url,function(data){
                    console.log(data)
                    display(data.oid,data.iid,data.l);
                },"jsonp");
        });         
    });

    function display(oid,iid,l){
        $(currentContainer).html("Owner Id = "+oid+" Item Id = "+iid+" Layout = "+l);
    }

而在身体里......

<div class="container" data-owner_id="George" data-item_id="car" data-layout="tidy">-</div>
<div class="container" data-owner_id="tim" data-item_id="computer" data-layout="allovertheplace">-</div>
<div class="container" data-owner_id="dee" data-item_id="hammer" data-layout="effingmess">-</div>

我得到的结果只是最后一个随机数据。任何想法都非常感谢！

4

2 回答 2

3

在这种情况下不要使用全局变量。将 currentContainer 作为参数传递给 display 函数。

var currentContainer = this;

...

var request = $.get(url,function(data){
                    console.log(data)
                    display(currentContainer, data.oid,data.iid,data.l);
                },"jsonp");

...

function display(currentcontainer, oid, iid, l) {
...
于 2013-07-25T20:24:57.710 回答
0

问题在于：

$(currentContainer).html("Owner Id = "+oid+" Item Id = "+iid+" Layout = "+l);

container当您使用类( )遍历 div 时$($(".container")).each，您将分配currentContainer给您正在处理的 div。所以最后，currentContainer指的是最后一个带有 class 的元素container。

在display中，您要选择div要使用其data属性进行操作的 。您可以使用 jQuery 的属性选择器进行此类选择$("[attribute='val']")

于 2013-07-25T20:26:17.403 回答