0

この非常に単純な問題があります。私のコードは繰り返しが多すぎます。それは機能しますが、かなりクリーンになる可能性があると確信していますが、どこから始めればよいか正確にはわかりません。

もっと上手に仕事ができるようになりたいし、誰かに手伝ってもらいたいです。

これは、非常に反復的な私のコードの2ビットです（すべて私が自分で行ったものです）：

$(document).ready(function(){

                // Setup your Lazy Line element.
                // see README file for more settings
                $('#drawing1').lazylinepainter({
                        'svgData' : dr1,
                        'strokeWidth':1.2,  
                        'strokeColor':'#65615a',
                        'onComplete' : function(){

                            }   
                    })

                $('#drawing2').lazylinepainter({
                'svgData' : dr2,
                'strokeWidth':1.2,  
                'strokeColor':'#65615a',
                'onComplete' : function(){

                        }   
                })

                $('#drawing3').lazylinepainter({
                'svgData' : dr3,
                'strokeWidth':1.2,  
                'strokeColor':'#65615a',
                'onComplete' : function(){

                        }   
                })

                $('#drawing4').lazylinepainter({
                'svgData' : dr4,
                'strokeWidth':1.2,  
                'strokeColor':'#65615a',
                'onComplete' : function(){

                        }   
                })

                $('#drawing5').lazylinepainter({
                'svgData' : dr5,
                'strokeWidth':1.2,  
                'strokeColor':'#65615a',
                'onComplete' : function(){

                        }   
                })

                // Paint your Lazy Line, that easy!

            })




        })( jQuery );

コードの 2 番目の部分:

var eventsFiredDr1 = 0;

var drawing1 = function() {
    if (eventsFiredDr1 == 0) {

            $('#drawing1').lazylinepainter('paint');

        eventsFiredDr1++; // <-- now equals 1, won't fire again until reload
        }
    }

var eventsFiredDr2 = 0;

var drawing2 = function() {
    if (eventsFiredDr2 == 0) {

            $('#drawing2').lazylinepainter('paint');

        eventsFiredDr2++; // <-- now equals 1, won't fire again until reload
        }
    }

var eventsFiredDr3 = 0;

var drawing3 = function() {
    if (eventsFiredDr3 == 0) {

            $('#drawing3').lazylinepainter('paint');

        eventsFiredDr3++; // <-- now equals 1, won't fire again until reload
        }
    }


var eventsFiredDr4 = 0;

var drawing4 = function() {
    if (eventsFiredDr4 == 0) {

        $('#drawing4').lazylinepainter('paint');

        eventsFiredDr4++; // <-- now equals 1, won't fire again until reload

        }
    }

var drawing5 = function() {
    if (eventsFiredDr5 == 0) {

        $('#drawing5').lazylinepainter('paint');

        eventsFiredDr5++; // <-- now equals 1, won't fire again until reload

        }
    }

$(window).resize(function() {
  if ($(window).width() < 820) {

    $("svg").hide()
    $(".fallback").show()
    $("#drawing2").css("height", "auto")
}
});

if ($(window).width() > 820 ) {

$(".fallback").hide()

$(window).scrollStopped(function(){
        if ($("#drawing1").is(":within-viewport")) {        
                   drawing1()
                    } 

        if ($("#drawing2").is(":within-viewport")) {      
            drawing2()
                    }

        if ($("#drawing3").is(":within-viewport")) {      
            drawing3()
                    }

        if ($("#drawing4").is(":within-viewport")) {      
            drawing4()
                    }

        if ($("#drawing5").is(":within-viewport")) {      
            drawing5()
                    }

});

(DOM 要素を変数に入れる必要があることはわかっていますが、コードをリファクタリングするときにそうするつもりでした。)

私の最初の推測は配列を作成することですが..コードでそれを使用する方法がわかりません。(超初心者です)

4

2 に答える 2

1

最初の部分は、関数で簡略化できます。

function addPainter(selector, svgData){
     $(selector).lazylinepainter({
                        'svgData' : svgData,
                        'strokeWidth':1.2,  
                        'strokeColor':'#65615a',
                        'onComplete' : function(){

                            }   
                    })
}
$(document).ready(function(){

                // Setup your Lazy Line element.
                // see README file for more settings
                addPainter('#drawing1', dr1);
                addPainter('#drawing2', dr2);
                addPainter('#drawing3', dr3);
                addPainter('#drawing4', dr4);
                addPainter('#drawing5', dr5);

                // Paint your Lazy Line, that easy!

            })




        })( jQuery );
于 2013-06-05T20:57:33.913 に答える