Question

我的网页上有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/

此致阿伦

Answer 1

你没有将img附加到表中，你只需要改变这个图像的位置，所以表的内容是相同的。如果你想将img's附加到表中，请使用像这样的方法

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

P.S。你可以启动功能，在瞬间更改表格，然后动画完成 - 阅读jquery文档

附加图像ID

1 个答案: