使用for循环显示相同div标签的多个时间

Question

我希望使用for循环显示具有相同div标签的不同文本。意味着如果我有三个文本，我将分别显示具有相同div标签的每个文本。我有三个阵列。前两个数组包含基于这些文本的x和y cooridantes将分别显示在div标签上。以下是我的代码。

  var i=1;
  for(var l=0;l<5;l++){
      $("#dimg1").attr('id','dimg'+i)
      $("#test").attr('id','test'+i)

        var st1=new Array();
        var st2=new Array();
        var st3=new Array();           

        st1=[120,150,190,250];
        st2=[130,170,220,280];
        st3=[Text1,Text2,Text3,Text4];
       $(document).ready(function(){
         $("#dimg1").hover(function(){     
           i++;

           for(var j=0;j<3;j++)
           {
              var X=st1[j];      
              var Y=st2[j];
              var txt=st3[j];      

              var test = $("<span class='test'+j></span>");

              test.html(txt);
              $(this).append(test.offset({left:X,top:Y}));
              //alert(i);
            }

         }, function(){
              $(".test").remove();
         }
      );

       });
   }

你也可以看到

中的输出

<div id="dimg1" class="dimg1" style=" border-color: #36C; border-style: dotted; width: 300px; height: 300px"></div>

Answer 1

你必须做4个分区，3个隐藏。

然后你可以加载文本并适当地隐藏它们。

Here is what I come up with

<强>脚本

 $("#myimg1").hover(function(){

      var x1=["50","100","150","200"];
      var y1=["50","100","150","200"];
      var txt1=["Text1","Text2","Text3","Text4"];
      var i=0;

      for(var i=1;i<4;i++)
      {
          var X=x1[i-1];
          var Y=y1[i-1];
          var txt=txt1[i-1];
          var test = $("<span class='test'></span>");
          test.html(txt);

          $("#myimg"+i).append(test.offset({left:X,top:Y}));
      }

$('.myimgcls').show();
 }, function() {

     $('.test').remove();
$('.myimgcls').not('.firstimg').hide();     
 });

<强> CSS：

.myimgcls {
    width:200px;
    height:200px;
    border:2px dashed #f30;
    position:relative;
}

.test {
    display:block;
    position:absolute;
}

<强> HTML

<div id="myimg1" class='myimgcls firstimg'></div>
<div id="myimg2" class='myimgcls' style="display:none"></div>
<div id="myimg3" class='myimgcls' style="display:none"></div>
<div id="myimg4" class='myimgcls' style="display:none"></div>