for 루프를 사용하여 동일한 div 태그를 여러 번 표시

Question

for 루프를 사용하여 동일한 div 태그로 다른 텍스트를 표시하려고합니다. 나가 3 개의 원본이있는 경우에 나는 동일한 div 꼬리표를 가진 각 원본을 따로 따로 표시 할 것이라는 점을 의미한다. 나는 3 개의 배열을 가지고있다. 첫 번째 두 배열에는 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(); 
     } 
    ); 

     }); 
    } 

u는 또한 당신이 4 분할, 3 숨겨진를 만들기 위해

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

Answer 1

출력을 참조하십시오.

그런 다음 텍스트를로드하고 적절하게 숨길 수 있습니다.

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>