Calling method is coming back undefined

2019-06-09 21:37发布

站内文章 / JavaScript
10 0 0

问题:

var ModalEffects = function(){

	function init() {

		var overlay = document.querySelector( '.md-overlay' );

		[].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {

			var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
				close = modal.querySelector( '.md-close' );

			function removeModal( hasPerspective ) {
				classie.remove( modal, 'md-show' );

				if( hasPerspective ) {
					classie.remove( document.documentElement, 'md-perspective' );
				}
			}

			function removeModalHandler() {
				removeModal( classie.has( el, 'md-setperspective' ) ); 
			}

			el.addEventListener( 'click', function( ev ) {
				classie.add( modal, 'md-show' );
				overlay.removeEventListener( 'click', removeModalHandler );
				overlay.addEventListener( 'click', removeModalHandler );

				if( classie.has( el, 'md-setperspective' ) ) {
					setTimeout( function() {
						classie.add( document.documentElement, 'md-perspective' );
					}, 25 );
				}
			});

			close.addEventListener( 'click', function( ev ) {
				ev.stopPropagation();
				removeModalHandler();
			});

		} );

	}

{init : init};

})();




// CALL ModalEffects() HERE

    var slot1 = [
    '<img class="0" src="imgs/temp-coffee-1.jpg" alt="coffee pot icon">',
    '<img class="1" src="imgs/temp-tea-1.jpg" alt="coffee pot icon">',
    '<img class="2" src="imgs/temp-espresso-1.jpg" alt="coffee pot icon">'
    ];
    var slot2 = [
    '<img class="0" src="imgs/temp-coffee-1.jpg" alt="coffee pot icon">',
    '<img class="1" src="imgs/temp-tea-1.jpg" alt="coffee pot icon">',
    '<img class="2" src="imgs/temp-espresso-1.jpg" alt="coffee pot icon">'
    ];
    var slot3 = [
    '<img class="0" src="imgs/temp-coffee-1.jpg" alt="coffee pot icon">',
    '<img class="1" src="imgs/temp-tea-1.jpg" alt="coffee pot icon">',
    '<img class="2" src="imgs/temp-espresso-1.jpg" alt="coffee pot icon">'
    ];


    function GetRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function Go(){
        AddSlots($('#slot_a'));
        AddSlots($('#slot_b'));
        AddSlots($('#slot_c'));
        resultA = MoveSlots($('#slot_a'));
        resultB = MoveSlots($('#slot_b'));
        resultC = MoveSlots($('#slot_c'));

        console.log( 'one ' + resultA + ' two ' + resultB + ' three ' + resultC );

        if(resultA == resultB && resultA == resultC ){
            // ModalEffects.init();
            // ModalEffects["init"]();
            // $('.md-modal').ModalEffects['init']();
            console.log(";alksdjf;laksjdf");
        } else {
          
            // CALL ModalEffects here...................
          
            ModalEffects.init();
            // ModalEffects["init"]();
            // $('.md-modal').ModalEffects['init']();
            // classie.add( '#modal-17', 'md-show' );
            // classie.add( '#modal-17', 'md-perspective' );
            // overlay.removeEventListener( 'click', removeModalHandler );
            // overlay.addEventListener( 'click', removeModalHandler );
        }

    }

    function MoveSlots(el){
        var time = 4500;
        time += Math.round(Math.random()*2000);
        el.stop(true,true);

        var randomArrayItem = GetRandomInt(0, 2);
        var currentMarginTop = parseInt(el.css('margin-top'));

        console.log(currentMarginTop);
        

        var marginTop = currentMarginTop + ((-90 * 100) - (randomArrayItem * 100 )); //change 100 to height placeholder
        console.log(marginTop);
        
        el.animate(
            {"margin-top":marginTop+"px"},
            {'duration' : time, 'easing' : "easeInOutQuint"}
        );   

        return randomArrayItem;
    }

    function AddSlots(el){

        for(i=0; i<200; i++){
            el.append("<div class='content'>" + slot1[0] + "</div>");
            el.append("<div class='content'>" + slot2[1] + "</div>");
            el.append("<div class='content'>" + slot3[2] + "</div>");
        }
    }

I have looked through questions everywhere, and it tells me to call ModalEffects by: ModalEffects.init(); but it is being stubborn and wont work! I left my attempts in there so you can see everything i have tried...

**code doesnt run, I just wanted to show :) ** There are 2 of my scripts posted below separated by comments.

//MODAL EFFECTS SCRIPT:

var ModalEffects = (function() {

	function init() {

		var overlay = document.querySelector( '.md-overlay' );

		[].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {

			var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
				close = modal.querySelector( '.md-close' );

			function removeModal( hasPerspective ) {
				classie.remove( modal, 'md-show' );

				if( hasPerspective ) {
					classie.remove( document.documentElement, 'md-perspective' );
				}
			}

			function removeModalHandler() {
				removeModal( classie.has( el, 'md-setperspective' ) ); 
			}

			el.addEventListener( 'click', function( ev ) {
				classie.add( modal, 'md-show' );
				overlay.removeEventListener( 'click', removeModalHandler );
				overlay.addEventListener( 'click', removeModalHandler );

				if( classie.has( el, 'md-setperspective' ) ) {
					setTimeout( function() {
						classie.add( document.documentElement, 'md-perspective' );
					}, 25 );
				}
			});

			close.addEventListener( 'click', function( ev ) {
				ev.stopPropagation();
				removeModalHandler();
			});

		} );

	}

	init();

})();


//SCRIPT WHERE I NEED TO CALL IT
var slot1 = [
    '<img class="0" src="imgs/temp-coffee-1.jpg" alt="coffee pot icon">',
    '<img class="1" src="imgs/temp-tea-1.jpg" alt="coffee pot icon">',
    '<img class="2" src="imgs/temp-espresso-1.jpg" alt="coffee pot icon">'
    ];
    var slot2 = [
    '<img class="0" src="imgs/temp-coffee-1.jpg" alt="coffee pot icon">',
    '<img class="1" src="imgs/temp-tea-1.jpg" alt="coffee pot icon">',
    '<img class="2" src="imgs/temp-espresso-1.jpg" alt="coffee pot icon">'
    ];
    var slot3 = [
    '<img class="0" src="imgs/temp-coffee-1.jpg" alt="coffee pot icon">',
    '<img class="1" src="imgs/temp-tea-1.jpg" alt="coffee pot icon">',
    '<img class="2" src="imgs/temp-espresso-1.jpg" alt="coffee pot icon">'
    ];


    function GetRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function Go(){
        AddSlots($('#slot_a'));
        AddSlots($('#slot_b'));
        AddSlots($('#slot_c'));
        resultA = MoveSlots($('#slot_a'));
        resultB = MoveSlots($('#slot_b'));
        resultC = MoveSlots($('#slot_c'));

        console.log( 'one ' + resultA + ' two ' + resultB + ' three ' + resultC );

        if(resultA == resultB && resultA == resultC ){
            // ModalEffects.init();
            // ModalEffects["init"]();
            // $('.md-modal').ModalEffects['init']();
            console.log(";alksdjf;laksjdf");
        } else {
            
            // *** THIS IS WHERE I NEED THE MODAL TO POP UP... SAYING ModalEffects is undefined. I have scripts in right order too...
          
            ModalEffects.init();
            // ModalEffects["init"]();
            // $('.md-modal').ModalEffects['init']();
            // classie.add( '#modal-17', 'md-show' );
            // classie.add( '#modal-17', 'md-perspective' );
            // overlay.removeEventListener( 'click', removeModalHandler );
            // overlay.addEventListener( 'click', removeModalHandler );
        }

    }

    function MoveSlots(el){
        var time = 4500;
        time += Math.round(Math.random()*2000);
        el.stop(true,true);

        var randomArrayItem = GetRandomInt(0, 2);
        var currentMarginTop = parseInt(el.css('margin-top'));

        console.log(currentMarginTop);
        

        var marginTop = currentMarginTop + ((-90 * 100) - (randomArrayItem * 100 )); //change 100 to height placeholder
        console.log(marginTop);
        
        el.animate(
            {"margin-top":marginTop+"px"},
            {'duration' : time, 'easing' : "easeInOutQuint"}
        );   

        return randomArrayItem;
    }

    function AddSlots(el){

        for(i=0; i<200; i++){
            el.append("<div class='content'>" + slot1[0] + "</div>");
            el.append("<div class='content'>" + slot2[1] + "</div>");
            el.append("<div class='content'>" + slot3[2] + "</div>");
        }
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

标签： javascript jquery modal-dialog
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~