追加圖片ID

我有在我的網頁的頂部，名爲IMG1，IMG2，IMG3 3張照片。（表1）追加圖片ID

我也是有在我的頁面的底部，命名爲F1，F2，F3 4張圖片， f4。（表2）

現在我正在將圖像f1移動到圖像img3上，通過img1上的圖像im3上的圖像f2。

，我讀了顯示錶1的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

爲了更好地理解，這裏是小提琴

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

Regards， Arun

來源

2014-11-06 Arun

圖像仍然在dom的第二個表。你只是在改變CSS。你將不得不移動dom節點來達到你想要的。 – 2014-11-06 12:18:32

你不追加img到表中，你只是改變這個圖像的位置，所以表的內容是相同的。如果你想添加img到表中，請使用這樣的提示

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

P.S.你可以啓動功能，改變表現在那一刻，然後動畫完成 - 閱讀jQuery文檔

來源

2014-11-06 12:18:01 kpblc

追加圖片ID

回答

相關問題