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

問題がなければ、もう 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 に答える