1

jQueryプラグインを作成しようとしています.xmlをロードするためにAJAX呼び出しを行う必要があります。

jQuery.fn.imagetags = function(options) {

  s = jQuery.extend({
     height:null,
     width:null,
     url:false,
     callback:null,
     title:null,
  }, options);

  return this.each(function(){
    obj = $(this);

    //Initialising the placeholder  
    $holder = $('<div />')
    .width(s.width).height(s.height)
    .addClass('jimageholder')
    .css({
        position: 'relative',
    });
    obj.wrap($holder);

    $.ajax({
      type: "GET",
      url: s.url,
      dataType: "xml",
      success:function(data){ initGrids(obj,data,s.callback,s.title); } ,
      error: function(data) { alert("Error loading Grid data."); },
    });

    function initGrids(obj, data,callback,gridtitle){
    if (!data) {
      alert("Error loading Grid data");
    }

    $("gridlist gridset",data).each(function(){
      var gridsetname = $(this).children("setname").text();
      var gridsetcolor = "";
      if ($(this).children("color").text() != "") {
        gridsetcolor = $(this).children("color").text();
      }
      $(this).children("grid").each(function(){     
        var gridcolor = gridsetcolor;
        //This colour will override colour set for the grid set
        if ($(this).children("color").text() != "") {
          gridcolor = $(this).children("color").text();
        }

        //addGrid(gridsetname,id,x,y,height,width)
        addGrid(
            obj,
            gridsetname,
            $(this).children("id").text(),
            $(this).children("x").text(),
            $(this).children("y").text(),
            $(this).children("height").text(),
            $(this).children("width").text(),
            gridcolor,
            gridtitle
        );

      });
    });

    }

    function addGrid(obj,gridsetname,id,x,y,height,width,color,gridtitle){
      //To compensate for the 2px border
      height-=4;
      width-=4;

      $grid = $('<div />')
        .addClass(gridsetname)
        .attr("id",id)
        .addClass('gridtag')
        .imagetagsResetHighlight()
        .css({
        "bottom":y+"px",
        "left":x+"px",
        "height":height+"px",
        "width":width+"px",
         });
       if(gridtitle != null){
         $grid.attr("title",gridtitle);
       }

      if(color != ""){
        $grid.css({
        "border-color":color,
        });
      }
      obj.after($grid);
    }
  });
}

上記のプラグインは、2 つの DOM オブジェクトにバインドし、2 つの個別の XML ファイルをロードしますが、コールバック関数は、ロードされた両方の XML ファイルを使用する最後の DOM オブジェクトでのみ実行されます。

コールバックが対応する DOM に適用されるようにするには、どうすればこれを修正できますか。上記の ajax 呼び出しは正しいですか?

使用例:

<script type="text/javascript">
        $(function(){
            $(".romeo img").imagetags({
              height:500,
              width:497,
              url: "sample-data.xml",
              title: "Testing...",
              callback:function(id){
                console.log(id);
              },
            });
        });
       </script>
       <div class="padding-10 min-item background-color-black">
         <div class="romeo"><img src="images/samplecontent/test_500x497.gif" alt="Image"> </div>
       </div>

<script type="text/javascript">
        $(function(){
            $(".romeo2 img").imagetags({
              height:500,
              width:497,
              url: "sample-data2.xml",
              title: "Testing...",
              callback:function(id){
                console.log(id);
              },
            });
        });
       </script>
       <div class="padding-10 min-item background-color-black">
         <div class="romeo2"><img src="images/samplecontent/test2_500x497.gif" alt="Image"> </div>
       </div>

サンプル XML データは次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
<gridlist>
    <gridset>
      <setname>gridset4</setname>
      <color>#00FF00</color>
      <grid>
        <color>#FF77FF</color>
        <id>grid2-324</id>
        <x>300</x>
        <y>300</y>
        <height>60</height>
        <width>60</width>
     </grid>
    </gridset>
    <gridset>
      <setname>gridset3</setname>
      <color>#00FF00</color>
      <grid>
        <color>#FF77FF</color>
        <id>grid2-212</id>
        <x>300</x>
        <y>300</y>
        <height>100</height>
        <width>100</width>
     </grid>
     <grid>
        <color>#FF77FF</color>
        <id>grid2-1212</id>
        <x>200</x>
        <y>10</y>
        <height>200</height>
        <width>10</width>
     </grid>
   </gridset>
</gridlist>
4

2 に答える 2

0

ajax の呼び出しが同じ URL でロードされ、2 番目の呼び出しが最初の呼び出しをキャンセルするため、問題が発生している可能性があります。

各 div で同じ URL を読み取る場合は、一度 ajax を呼び出してから、返されたときに要素をループしてみませんか。

jQuery.fn.imagetags = function(options) {

  s = jQuery.extend({
     height:null,
     width:null,
     url:false,
     callback:null,
     title:null,
  }, options);

  var elems = $(this);

  $.ajax({
      type: "GET",
      url: s.url,
      dataType: "xml",
      success:function(data){ 
        elems.each(function() {     
          obj = $(this);

          //Initialising the placeholder  
          $holder = $('&lt;div /&gt;')
          .width(s.width).height(s.height)
          .addClass('jimageholder')
          .css({
              position: 'relative',
          });
          obj.wrap($holder); 
          initGrids(obj,data,s.callback,s.title); 
        });
      },
      error: function(data) { alert("Error loading Grid data."); }
    });

  return $(this);
}

基本的に、ここで行うことは、ajax 関数を呼び出して、すぐにセットを返すことです。次に、ajax コールバックが起動されると、要素をループしてデータを追加します。

于 2009-03-30T18:19:44.277 に答える
0

これは範囲の問題である可能性があります。関数内で変数を宣言するときは、「var」ステートメントを使用する必要があります。それ以外の場合、変数はグローバル スコープに入ります。

var s = jQuery.extend({
     height:null,
     width:null,
     url:false,
     callback:null,
     title:null,
  }, options);

elems.each(function() {     
      var obj = $(this);

      ....
}

変数はグローバル スコープ内に存在するため、ループの反復ごとに上書きされ、最終的に最後の DOM 要素になります。

于 2009-12-15T16:02:29.227 に答える