我該如何將這段JavaScript代碼簡化爲更有用的

我已經創建了以下代碼來測試10個對象的拖放操作，但是我需要幫助來創建任意數量的拖放對象...我'我想找一種方式來動態地創建每個拖動和投擲的對象和捕捉COORDS每個時刻....基於您的代碼我該如何將這段JavaScript代碼簡化爲更有用的

var oA = document.all ? document.all["a"] : document.getElementById("a") 
     var oB = document.all ? document.all["b"] : document.getElementById("b") 
     var oC = document.all ? document.all["c"] : document.getElementById("c") 
     var oD = document.all ? document.all["d"] : document.getElementById("d") 
     var oE = document.all ? document.all["e"] : document.getElementById("e") 
     var oF = document.all ? document.all["f"] : document.getElementById("f") 
     var oG = document.all ? document.all["g"] : document.getElementById("g") 
     var oH = document.all ? document.all["h"] : document.getElementById("h") 
     var oI = document.all ? document.all["i"] : document.getElementById("i") 
     var oJ = document.all ? document.all["j"] : document.getElementById("j") 

     var fA = document.all ? document.all["fA"] : document.getElementById("fA") 
     var fB = document.all ? document.all["fB"] : document.getElementById("fB") 
     var fC = document.all ? document.all["fC"] : document.getElementById("fC") 
     var fD = document.all ? document.all["fD"] : document.getElementById("fD") 
     var fE = document.all ? document.all["fE"] : document.getElementById("fE") 
     var fF = document.all ? document.all["fF"] : document.getElementById("fF") 
     var fG = document.all ? document.all["fG"] : document.getElementById("fG") 
     var fH = document.all ? document.all["fH"] : document.getElementById("fH") 
     var fI = document.all ? document.all["fI"] : document.getElementById("fI") 
     var fJ = document.all ? document.all["fJ"] : document.getElementById("fJ") 

     Drag.init(oA, null, 0, 278, 0, 278); 
     Drag.init(oB, null, 0, 278, 0, 278); 
     Drag.init(oC, null, 0, 278, 0, 278); 
     Drag.init(oD, null, 0, 278, 0, 278); 
     Drag.init(oE, null, 0, 278, 0, 278); 
     Drag.init(oF, null, 0, 278, 0, 278); 
     Drag.init(oG, null, 0, 278, 0, 278); 
     Drag.init(oH, null, 0, 278, 0, 278); 
     Drag.init(oI, null, 0, 278, 0, 278); 
     Drag.init(oJ, null, 0, 278, 0, 278); 

     oA.onDragEnd = function(x, y) { keepDragEnd(fA, fA1, "A", x, y); } 
     oB.onDragEnd = function(x, y) { keepDragEnd(fB, fB1, "B", x, y); } 
     oC.onDragEnd = function(x, y) { keepDragEnd(fC, fC1, "C", x, y); } 
     oD.onDragEnd = function(x, y) { keepDragEnd(fD, fD1, "D", x, y); } 
     oE.onDragEnd = function(x, y) { keepDragEnd(fE, fE1, "E", x, y); } 
     oF.onDragEnd = function(x, y) { keepDragEnd(fF, fF1, "F", x, y); } 
     oG.onDragEnd = function(x, y) { keepDragEnd(fG, fG1, "G", x, y); } 
     oH.onDragEnd = function(x, y) { keepDragEnd(fH, fH1, "H", x, y); } 
     oI.onDragEnd = function(x, y) { keepDragEnd(fI, fI1, "I", x, y); } 
     oJ.onDragEnd = function(x, y) { keepDragEnd(fJ, fJ1, "J", x, y); } 

     oA.onDrag = function(x, y) { keepDragEnd(fA, fA1, "A", x, y); } 
     oB.onDrag = function(x, y) { keepDragEnd(fB, fB1, "B", x, y); } 
     oC.onDrag = function(x, y) { keepDragEnd(fC, fC1, "C", x, y); } 
     oD.onDrag = function(x, y) { keepDragEnd(fD, fD1, "D", x, y); } 
     oE.onDrag = function(x, y) { keepDragEnd(fE, fE1, "E", x, y); } 
     oF.onDrag = function(x, y) { keepDragEnd(fF, fF1, "F", x, y); } 
     oG.onDrag = function(x, y) { keepDragEnd(fG, fG1, "G", x, y); } 
     oH.onDrag = function(x, y) { keepDragEnd(fH, fH1, "H", x, y); } 
     oI.onDrag = function(x, y) { keepDragEnd(fI, fI1, "I", x, y); } 
     oJ.onDrag = function(x, y) { keepDragEnd(fJ, fJ1, "J", x, y); }

來源

2012-03-03 orovis

，並用三個數組來保存你使用的字符串，它可以進行重構是這樣的：

var arr1=["a","b","c","d","e","f","g","h","i","j"]; 
var arr2=["fA","fB","fC","fD","fE","fF","fG","fH","fI","fJ"]; 
var arr3=["A","B","C","D","E","F","G","H","I","J"]; 
var numobjects=10; 

for(i=0 to numobjects-1) 
{ 
    var o[i]=document.all?document.all[arr1[i]]:document.getElementById(arr1[i]); 
    var f[i]=document.all?document.all[arr2[i]]:document.getElementById(arr2[i]); 
    Drag.init(o[i], null, 0, 278, 0, 278); 
    o[i].onDragEnd=function(x, y) {keepDragEnd(f[i], f1[i], arr3[i], x, y);} 
    oA.onDrag=function(x, y) {keepDragEnd(f[i], f1[i], arr3[i], x, y);} 
}

來源

2012-03-03 10:01:25 Gareth

謝謝加雷思。這隻解決了部分問題。例如，如果只說2個項目拖動和下一個25個項目，那麼需要什麼。變量arr1,2,3等仍然是靜態的，因爲你已經聲明瞭它們......或者我錯過了什麼？ – orovis 2012-03-03 10:42:59

第一個和第二個數組存儲頁面中元素的ID - 除非您使用某些特定公式生成這些元素（它們是否總是按順序排列的字母表？如果有超過26個項目，會發生什麼情況？等等），那麼你需要把每個id放到一個數組中，以便代碼知道要查找什麼。另一種選擇是動態生成這些元素。至於第三個數組 - 我不知道「A」，「B」，「C」等與什麼有關，所以我不得不逐字將它們複製到一個數組中。如果你想得到更詳細的答案，你需要更詳細的問題。 – Gareth 2012-03-03 11:03:14

這些字母是按順序排列的。我已經刪除了第三個數組......不再需要它了。問題是拖放功能不起作用，當最初放置在頁面上的對象少於聲明...例如服務器代碼寫入2 IMG的頁面...但JavaScript啓動10。 ..拖放不再有效。 – orovis 2012-03-03 11:16:29

var arr_id = [/* the ids */]; 
var arr_id_f = [/* the ids */]; 
var len = "{$ servers output here }";/* elem numbers you want set */ 
function init () { 
    var oa; 
    function getOnDrag (a, b) { 
     return function(x, y) { keepDragEnd(a, b, "A", x, y); } 
    }  
    for (var i = 0; i < len; i += 1){ 
     Drag.init(oa, null, 0, 278, 0, 278); 
     oa = document.getElementById(arr_id[i]); 
     oA.onDrag = oa.onDragEnd = getOnDrag (document.getElementById(arr_id_f[i]), /* you dont mention what should be here */oa1); 
    } 
} 
init()

你可以在jsp頁面上插入代碼並輸出len;在服務器端，js只是字符串
在我看來，你可以設置elems一個相同的類名，所以得到他們通過getElementsByClassName或使用jquery或任何你喜歡的，它會更可重用

來源

2012-03-03 13:29:50

我該如何將這段JavaScript代碼簡化爲更有用的

回答

相關問題