javascript - 附加图像 ID

Question

我的网页顶部有 3 张图片，名为 img1、img2、img3。(表 1)

我的页面底部还有 4 张图片，名为 f1、f2、f3、f4。(表 2)

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

我读取了显示的 Table1 id，但它显示了以前的 ids(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

为了更好的理解，这里是 fiddle

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

问候， 阿伦

Answer 1

你没有将 img 添加到表格中，你只是改变了这张图片的位置，所以表格的内容是一样的。如果你想将 img 添加到表中，请使用这样的东西

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

附言您可以立即启动更改表内容的功能，然后动画完成 - 阅读 jquery 文档