如何使此Javascript代码更简洁？_Javascript

如何使此Javascript代码更简洁？

javascript

如何使此Javascript代码更简洁？,javascript,Javascript,对编码来说相当陌生，我正在构建一个连接四的游戏。我粘贴的代码允许我将红色和黄色标记拖放到游戏板顶行的单元格中。这是可行的，但在我进入下一步之前，我想知道是否有一种不那么“冗长”的方式，我可以做到这一点？更专业的方法 var dragYellow = document.getElementById("yellowToken1"); var dragRed = document.getElementById("redToken1"); var dropLoc10 = document.getE

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

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);                    

}

比如：

    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");
    }

var dragYellow=document.getElementById（“yellowToken1”）；
var dragRed=document.getElementById（“redToken1”）；
var-dropLoc=[]；
对于（i=10；i<17；i++）{
dropLoc[i]=document.getElementById（i.toString（））；
dropLoc[i].ondragover=函数（evt）{
evt.preventDefault（）；
}
dropLoc[i].ondrop=函数（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=函数（evt）{
setData（“key”，“yellowToken1”）；
}
dragRed.ondragstart=函数（evt）{
setData（“key”，“redToken1”）；
}

你知道“干”这个词吗（别重复了）？如果你发现自己在写名字时用数字作为后缀，那么使用数组是一个巨大的提示

类似于：

    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");
    }

var dragYellow=document.getElementById（“yellowToken1”）；
var dragRed=document.getElementById（“redToken1”）；
var-dropLoc=[]；
对于（i=10；i<17；i++）{
dropLoc[i]=document.getElementById（i.toString（））；
dropLoc[i].ondragover=函数（evt）{
evt.preventDefault（）；
}
dropLoc[i].ondrop=函数（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=函数（evt）{
setData（“key”，“yellowToken1”）；
}
dragRed.ondragstart=函数（evt）{
setData（“key”，“redToken1”）；
}

你知道“干”这个词吗（别重复了）？如果你发现自己在写名字时用数字作为后缀，那么使用数组是一个巨大的提示

我建议您向要拖放的对象添加一个

类。例如：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元素仅附加到该对象。
我建议您将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元素附加到该对象上。
对于任何感兴趣的人，请参阅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');
    }

var dragYellow=document.getElementById（'yellowToken1'）；
var dragRed=document.getElementById（'redToken1'）；
var-dropLoc=[]；
对于（i=10；i<17；i++）{
dropLoc[i]=document.getElementById（i.toString（））；
dropLoc[i].ondragover=函数（evt）{
evt.preventDefault（）；
console.log（'drawing over'）；
}
dropLoc[i].ondrop=函数（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=函数（evt）{
setData（'key'，'yellowToken1'）；
控制台日志（“拖动”）；
}
dragRed.ondragstart=函数（evt）{
setData（'key'，'redToken1'）；
log（'drawing'）；
}
对于任何感兴趣的人，请参阅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');
    }

var dragYellow=document.getElementById（'yellowToken1'）；
var dragRed=document.getElementById（'redToken1'）；
var-dropLoc=[]；
对于（i=10；i<17；i++）{
dropLoc[i]=document.getElementById（i.toString（））；
dropLoc[i].ondragover=函数（evt）{
evt.preventDefault（）；
console.log（'drawing over'）；
}
dropLoc[i].ondrop=函数（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=函数（evt）{
setData（'key'，'yellowToken1'）；
控制台日志（“拖动”）；
}
dragRed.ondragstart=函数（evt）{