0

有没有办法用循环或任何东西来简化这段代码？我是 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 制作筷子游戏。

谢谢！

4

2 回答 2

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 循环生成您需要的所有组合

于 2013-02-02T08:58:25.877 回答
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";
    }
于 2013-02-02T08:59:24.473 回答