如何使这段 Javascript 代码更简洁？

Question

对编码相当陌生，我正在构建一个四人连接游戏。我粘贴的代码允许我将红色和黄色标记拖放到游戏板顶行的单元格中。这行得通，但在我继续下一步之前，我想知道是否有一种不那么“冗长”的方式可以解决这个问题？更专业的方法？

var dragYellow = document.getElementById("yellowToken1");
var dragRed = document.getElementById("redToken1");   
var dropLoc10 = document.getElementById("10");   
var dropLoc11 = document.getElementById("11");
var dropLoc12 = document.getElementById("12");
var dropLoc13 = document.getElementById("13");
var dropLoc14 = document.getElementById("14");
var dropLoc15 = document.getElementById("15");
var dropLoc16 = document.getElementById("16");

dragYellow.ondragstart = function(evt) {  
    evt.dataTransfer.setData("key", "yellowToken1");
}

dragRed.ondragstart = function(evt) {  
    evt.dataTransfer.setData("key", "redToken1");
}

dropLoc10.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc11.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc12.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc13.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc14.ondragover = function(evt) {    
    evt.preventDefault();                       
} 

dropLoc15.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc16.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc10.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc10.appendChild(myNewElement);                    

}

dropLoc11.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc11.appendChild(myNewElement);                    

}

dropLoc12.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc12.appendChild(myNewElement);                    

}

dropLoc13.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc13.appendChild(myNewElement);                    

}

dropLoc14.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc14.appendChild(myNewElement);                    

}

dropLoc15.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc15.appendChild(myNewElement);                    

}

dropLoc16.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc16.appendChild(myNewElement);                    

}

Answer 1

类似：

    var dragYellow = document.getElementById("yellowToken1");
    var dragRed = document.getElementById("redToken1");  
    var dropLoc = [];
    for (i = 10; i < 17; i++) {
        dropLoc[i] = document.getElementById(i.toString());
        dropLoc[i].ondragover = function(evt) {    
            evt.preventDefault();                       
        }
        dropLoc[i].ondrop = function(evt) {                  
            evt.preventDefault();             
            var dropItem = evt.dataTransfer.getData("key");  
            var myElement = document.getElementById(dropItem);   
            var myNewElement = document.createElement("img");   
            myNewElement.src = myElement.src;                   
            dropLoc[i].appendChild(myNewElement);                    

        }
    } 


    dragYellow.ondragstart = function(evt) {  
        evt.dataTransfer.setData("key", "yellowToken1");
    }

    dragRed.ondragstart = function(evt) {  
        evt.dataTransfer.setData("key", "redToken1");
    }

您知道 DRY（不要重复自己）这个词吗？如果您发现自己用数字作为后缀来编写名称，那么建议您改用数组！

Answer 2

我建议您将class 添加到您要拖放的对象的位置。例如：您的 drop 元素可能有一个类（比如说 drop-location），您只需这样做 -

var dropLocs = document.querySelector(".drop-location");

dropLocs.ondragover = function(evt) {    
    evt.preventDefault();                 
}

dropLocs.ondrop = function(evt) {                  
    // Drop logic here
}

因为它是一个类选择器，所以您必须找出目标对象 (evt.target) 并仅将新创建的 img 元素附加到该对象。

Answer 3

对于任何感兴趣的人，请查看Sharper 的代码，但我不得不更改一行

var dragYellow = document.getElementById('yellowToken1');
    var dragRed = document.getElementById('redToken1');  
    var dropLoc = [];
    for (i = 10; i < 17; i++) {
        dropLoc[i] = document.getElementById(i.toString());

        dropLoc[i].ondragover = function(evt) {    
            evt.preventDefault(); 
            console.log('dragging over');                      
        }
        dropLoc[i].ondrop = function(evt) {                  
            evt.preventDefault();             
            var dropItem = evt.dataTransfer.getData('key');  
            var myElement = document.getElementById(dropItem);   
            var myNewElement = document.createElement('img');   
            myNewElement.src = myElement.src;                   
            evt.currentTarget.appendChild(myNewElement);                    
        }
    } 


    dragYellow.ondragstart = function(evt) {  
        evt.dataTransfer.setData('key', 'yellowToken1');
        console.log("dragging");
    }

    dragRed.ondragstart = function(evt) {  
        evt.dataTransfer.setData('key', 'redToken1');
        console.log('dragging');
    }