0

forループを使って同じdivタグで別のテキストを表示したい。3 つのテキストがある場合、各テキストを同じ div タグで個別に表示することを意味します。私は3つの配列を持っています。最初の 2 つの配列には、これらのテキストに基づく x 座標と y 座標が含まれており、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>

ここに画像の説明を入力

4

1 に答える 1

1

4 つの分割、3 つの非表示を作成する必要があります。

次に、テキストを読み込んで適切に非表示にすることができます。

これが私が思いついたものです

脚本

 $("#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>
于 2013-03-27T11:41:27.220 に答える