javascript - 如何将移动的图像细节作为警报

Question

我的网页顶部有 4 张图片(在一个表格中)，另外 4 张图片在我的网页底部(在另一个表格中)。 我有两个名为“Move”和“Getdata”的按钮 当我点击移动时，屏幕底部的图像将飞过并固定在顶部表格上显示的图像上。

我的查询是，在移动图像后我按下“获取数据”按钮，该按钮未将移动的图像细节显示为警报。仅显示第一个放置的图像细节。 HTML代码:

 <div id="ans">
<table id="ansTable" >
  <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>
    <td id="td4"  >
     <img id="img4" alt="" src="http://lorempixel.com/j/100/100/" draggable="false"/>
       </td>
     </tr>
</table>
</div>

<br/><br/><br/>

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

<button id ="btnGetdata"   class="myButton">Get Data</button>


<div id="Ques" style="padding-left:200px;padding-top:200px">
<table id="quesTable" >
  <tr>
      <td id="ftd1" >
      <img id="fly1" alt="" src="http://lorempixel.com/c/100/100/" draggable="false"/>
       </td>
    <td  id="ftd2"  >
      <img id="fly2" alt="" src="http://lorempixel.com/l/100/100/" draggable="false"/>
       </td>
    <td id="ftd3" >
     <img id="fly3" alt="" src="http://lorempixel.com/m/100/100/" draggable="false"/>
       </td>
    <td id="ftd4"  >
     <img id="fly4" alt="" src="http://lorempixel.com/n/100/100/" draggable="false"/>
       </td>
     </tr>
</table>
</div>

JQuery 代码:

$("#btnGetdata").click(function () {
     var table = document.getElementById('ansTable');
  var data=table.rows[0].cells[0].innerHTML;
    alert(data);
});


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

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

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


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

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

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

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

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

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

这是制定好的 Jsfiddle 链接:

http://jsfiddle.net/a09bshb7/41/

请帮我解决同样的问题。 谢谢， 普雷姆

Answer 1

根据您的代码，您将底部(“#quesTable”)图像设置为顶部图像(“#ansTable”)位置的动画，这不一定更新位于顶部的图像的父 div(“#ansTable”)内容。

更新您的 $("#btnMove").click(); 底部部分，添加以下代码行:

$("<br/><br/><br/><br/><br/><br/>").insertAfter("#ans"); // to keep your buttons on fixed position. You can handle it using css also.
$("#ansTable tr").replaceWith($("#quesTable tr"));
$("#Ques").remove();

和$("#btnGetdata").click();事件如下:

$("#btnGetdata").click(function () {
    $("#ansTable tr td").each(function(){
        alert($(this).children("img").attr("id"));
    });
});

在这里，当您单击“完成”按钮时，您将更新图像的位置，并将 ansTable 内容替换为 quesTable 内容。

为此我使用了 .replaceWith() jQuery 的方法。

jsFiddle