Question

我的网页顶部（表格中）有4张图片，页面底部有4张图片（在另一张表格中）。我有两个名为“Move”的按钮＆amp; “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/

请帮助我。谢谢， PREM

Answer 1

从我能够理解的内容检查此链接：http://jsfiddle.net/a09bshb7/42/

如果这是你想要实现的。

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

Answer 2

根据您的代码，您可以将底部（＆＃34; #quesTable ＆＃34;）图片设置为热门图片（＆＃34; #ansTable ＆＃34;）不一定更新顶部位置图像的父div（＆＃34; #ansTable ＆＃34;）的位置。

更新 $（＆＃34;＃btnMove＆＃34;）。点击（）; 底部添加以下代码行：

$("<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();

和 $（＆＃34;＃btnGetdata＆＃34;）。click（）; 事件如下：

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

在此处，您在单击“完成”按钮时更新图像的位置，并使用quesTable内容替换ansTable内容。

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

jsFiddle

如何将移动的图像细节视为警报

2 个答案: