如何简化javascript代码

有没有办法用循环或其他方法来简化这段代码？我是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";
        }

如果您想查看实际运行的代码，可以在中查看完整的HTML代码。我正在尝试使用HTML和javascript制作一个筷子游戏

---

谢谢

对于初学者来说，如果你有一个函数

 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循环生成所需的所有组合，如果您有一个函数

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

如果没有问题，可以再添加一个参数，即数字，并在前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";
    }

---

如果没有问题，您可以再添加一个参数，即数字，并为前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";
    }

---

最好去。谢谢！我会问的there@user2034878如果你想在CodeReviewBetter上提问，请删除此处的问题。谢谢！我会问的there@user2034878如果您要在CodeReview上提问，请删除此处的问题