如何在div标签内打印文本

Question

我希望在div标签上打印文本。这里我有三个阵列。 x_array和y_array继承了x和y值的cooridantes，txt_array包含文本。基于和x和y坐标的文本将显示在div标签中。以下代码将显示预期输出，但它将仅显示最后一个数组元素。剩下的将被删除。我希望显示基于x和y坐标的所有文本。请帮助我。

<script>
        var i=0;
       // var obj={"A","B","C","D"};
   $(document).ready(function(){
 $("#myimg").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=0;i<4;i++)
      {

  var X=x1[i];
  var Y=y1[i];
  var txt=txt1[i];

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


  }

 });
 });
    </script>

Answer 1

ID 必须是唯一的。请尝试使用classes。

即使允许多个ID，您使用.html()也会覆盖所有#test元素的HTML。您需要通过脚本动态创建元素：

  var test = $("<span class='test'></span>");
  test.html(txt);
  $("#myimg").append(test.offset({left:X,top:Y}));

同样，如果您有多个#myimg元素，也可以使用类。