javascript - 附加图片ID

我的网页上方有3张图片,分别为img1,img2,img3。(表1)

另外,我在页面底部有4张图像,分别名为f1,f2,f3,f4。(表2)

现在,我将图像f1移动到图像img3上方,将f2移动到img1上方,将f3移动到img4上方。

我阅读了显示的Table1 ID,但它显示了以前的ID(img1,img2,img3),但是我需要读为(f2,img2,f3)

<div >
<table id="t1" >
  <tr>
      <td id="td1" >
      <img id="img1" alt="" src="http://lorempixel.com/g/100/100/" draggable="false"/>
       </td>
    <td  id="td2"  >
      <img id="img2" alt="" src="http://lorempixel.com/h/100/100/" draggable="false"/>
       </td>
    <td id="td3" >
     <img id="img3" alt="" src="http://lorempixel.com/i/100/100/" draggable="false"/>
       </td>

     </tr>
</table>
</div>


<button id ="btnAnimate"   class="myButton">Done</button>

<button id ="btnGetID"   class="myButton"> Get ID</button>


<div style="padding-left:100px;padding-top:100px">
<table id="t2" >
  <tr>
      <td >
      <img id="f1" alt="" src="http://lorempixel.com/c/100/100/" draggable="false"/>
       </td>
    <td   >
      <img id="f2" alt="" src="http://lorempixel.com/l/100/100/" draggable="false"/>
       </td>
    <td  >
     <img id="f3" alt="" src="http://lorempixel.com/m/100/100/" draggable="false"/>
       </td>
    <td >
     <img id="f4" alt="" src="http://lorempixel.com/n/100/100/" draggable="false"/>
       </td>
     </tr>
</table>
</div>


JavaScript ..

$("#btnGetID").on('click',function () {
       $('#t1 tr td').each(function(){
        alert($(this).find('img').attr('id'));
    });
});


$("#btnAnimate").click(function () {

 var v = $("#f1").offset();
  var p = $("#img3").offset();
 $("#f1").css({ "top": v.top + "px", "left": v.left + "px" , "position": "absolute"});

    $("#f1").animate({
        opacity: 1,
         top: p.top,
         left: p.left
    }, 1000);


 var v = $("#f2").offset();
 var p = $("#img1").offset();
 $("#f2").css({ "top": v.top + "px", "left": v.left + "px" , "position": "absolute"});

    $("#f2").animate({
        opacity: 1,
         top: p.top,
         left: p.left
    }, 1000);

var v = $("#f3").offset();
var p = $("#img4").offset();
 $("#f3").css({ "top": v.top + "px", "left": v.left + "px" , "position": "abs


为了更好的理解,这是小提琴

http://jsfiddle.net/a09bshb7/57/

问候,
阿伦

最佳答案

您无需将img附加到表中,只需更改此图像的位置,因此表的内容是相同的。如果您想将img附加到表中,请使用somethig这样的

var myNewImg = $("#my_new_img");
$("#some_elem .children1").html(myNewImg);


附言您可以在动画完成后立即启动更改表竞争的功能-阅读jquery文档