有没有办法用循环或任何东西简化这段代码?我是javascript的初学者,我的代码太可怕了。请不要告诉我转换为jquery或任何东西。
function dragLeftdropLeft1(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");
document.getElementById('topLeft1').style.display = "none";
document.getElementById('topLeft2').style.display = "block";
}
function dragLeftdropLeft2(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");
document.getElementById('topLeft2').style.display = "none";
document.getElementById('topLeft3').style.display = "block";
}
function dragLeftdropLeft3(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");
document.getElementById('topLeft3').style.display = "none";
document.getElementById('topLeft4').style.display = "block";
}
function dragLeftdropLeft4(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");
document.getElementById('topLeft4').style.display = "none";
document.getElementById('topLeft5').style.display = "block";
}
function dragLeftdropLeft5(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");
document.getElementById('topLeft5').style.display = "none";
document.getElementById('topLeft1').style.display = "block";
}
function dragLeftdropRight1(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");
document.getElementById('topRight1').style.display = "none";
document.getElementById('topRight2').style.display = "block";
}
function dragLeftdropRight2(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");
document.getElementById('topRight2').style.display = "none";
document.getElementById('topRight3').style.display = "block";
}
function dragLeftdropRight3(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");
document.getElementById('topRight3').style.display = "none";
document.getElementById('topRight4').style.display = "block";
}
function dragLeftdropRight4(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");
document.getElementById('topRight4').style.display = "none";
document.getElementById('topRight5').style.display = "block";
}
function dragLeftdropRight5(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");
document.getElementById('topRight5').style.display = "none";
document.getElementById('topRight1').style.display = "block";
}
function dragRightdropLeft1(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Right");
document.getElementById('topLeft1').style.display = "none";
document.getElementById('topLeft2').style.display = "block";
}
function dragRightdropLeft2(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Right");
document.getElementById('topLeft2').style.display = "none";
document.getElementById('topLeft3').style.display = "block";
}
function dragRightdropLeft3(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Right");
document.getElementById('topLeft3').style.display = "none";
document.getElementById('topLeft4').style.display = "block";
}
function dragRightdropLeft4(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Right");
document.getElementById('topLeft4').style.display = "none";
document.getElementById('topLeft5').style.display = "block";
}
function dragRightdropLeft5(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Right");
document.getElementById('topLeft5').style.display = "none";
document.getElementById('topLeft1').style.display = "block";
}
function dragRightdropRight1(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Right");
document.getElementById('topRight1').style.display = "none";
document.getElementById('topRight2').style.display = "block";
}
function dragRightdropRight2(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Right");
document.getElementById('topRight2').style.display = "none";
document.getElementById('topRight3').style.display = "block";
}
function dragRightdropRight3(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Right");
document.getElementById('topRight3').style.display = "none";
document.getElementById('topRight4').style.display = "block";
}
function dragRightdropRight4(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Right");
document.getElementById('topRight4').style.display = "none";
document.getElementById('topRight5').style.display = "block";
}
function dragRightdropRight5(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Right");
document.getElementById('topRight5').style.display = "none";
document.getElementById('topRight1').style.display = "block";
}
如果您想查看代码的实际效果,可以在http://thomaswd.com/chopsticks查看完整的HTML代码。我正在尝试使用HTML和javascript制作筷子游戏。
谢谢!
答案 0 :(得分:2)
function some_meaningful_name(ev, hand, toNone, toBlock) {
ev.preventDefault();
var data=ev.dataTransfer.getData(hand);
document.getElementById(toNone).style.display = "none";
document.getElementById(toBlock).style.display = "block";
}
你可以称之为
some_meaningful_name('Left', 'topRight5', 'topRight1');
然后,很可能如果你将所有这些字符串放在数组中,你可以用for循环生成所需的所有组合
答案 1 :(得分:1)
如果不是问题,您可以再添加一个参数,数字,并为前5个函数添加:
function dragLeftdropLeft(ev, num) {
ev.preventDefault();
num2 = num + 1;
if(num2 == 6)
num2 = 1
var data=ev.dataTransfer.getData("Left");
document.getElementById('topLeft' + num).style.display = "none";
document.getElementById('topLeft' + num2).style.display = "block";
}