여러 요소에 jQuery 플러그인을 할당합니다.

Question

지금까지 5 시간 쯤 웹을 둘러 보았습니다. 내 문제에 대한 해결책을 찾을 수 없습니다. 모든 플러그인에 타이핑 효과를주는 플러그인을 작성했습니다. 주어진 요소와 그것을 완벽하게 하나의 요소에 사용하는 경우에만 작동하지만, 내가 두 번째 요소에 그것을 사용하려면, 그것은 두 번째 하나를 수행하고 여기 왜 : 내 플러그인에 나는 "setInterval"을 사용 특정 속도로 타이핑하고 특정 문자를 지연시키기 위해 글자를 검사하면, 플러그인을 두 번 이상 호출하여 변수에 새 값을 설정하고 간격을 새로 설정된 값과 충돌시키고 모든 것을 망칠 때 문제가 발생합니다 쪽으로. 여기

(function ($) { 

    //typing effect for text 
    $.fn.typingText = function (options) { 
     var setting = $.extend({ 

      //the starting point ==> *(it starts typing when the scrollbar hit the starting point) 
      start: 0, 

      //the user given delay character ==> *(it delays the typing when it hits this character) ==> *(must be a character not a digit or alphabet) 
      delayChar: '.', 

      //the speed of typer ==> *(must be at least 50) 
      speed: 100, 

      //the delay duration when it hits delaying characters ==> *(delaying characters are ? ! . and any other given character in delayChar variable) 
      delay: 500 
     }, options); 
     if (setting.speed < 50) { 
      setting.speed = 50; 
     } 
     if (setting.delay < 100) { 
      setting.delay = 100; 
     } 
     setting.delayChar = setting.delayChar.slice(0, 1); 
     window.that = $(this); 
     if ($(document).scrollTop() >= setting.start) { 
      $(this).css('display', 'block'); 
      window.text = $(this).text(); 
      window.textLength = window.text.length; 
      window.char = 0; 
      setting.delayChar = '^\\' + setting.delayChar; 
      $(this).text(''); 
      $(this).html('<span class="textLine"></span>'); 
      $(this).append('<span class="blinkingLine">|</span>'); 
      window.blinking = setInterval(function() { 
       $('.blinkingLine').animate({ 
        opacity: 0 
       }, 300); 
       setTimeout(function() { 
        $('.blinkingLine').animate({ 
         opacity: 1 
        }, 300); 
       }, 300); 
      }, 600); 

      function type() { 
       window.that.children('.textLine').text(window.text.substr(0, window.char)); 
       window.lastChar = window.that.children('.textLine').text().slice(window.that.children('.textLine').text().length - 1); 
       window.char++; 
       if (window.char > window.textLength) { 
        window.that.children('.textLine').text(window.that.children('.textLine').text().substr(0, window.textLength)); 
        $('.blinkingLine').remove(); 
        clearInterval(window.startTyping); 
        clearInterval(window.blinking); 
        clearInterval(window.checking); 
       } 
      } 
      window.timer = 0; 
      window.startTyping = setInterval(type, setting.speed); 
      window.checking = setInterval(function() { 
       if (!window.delaying || typeof window.delaying == 'undefined' || window.timer >= setting.delay) { 
        if (window.lastChar.match('^\\?') || window.lastChar.match('^\\.') || window.lastChar.match('^\\!') || window.lastChar.match(setting.delayChar)) { 
         if (window.timer >= setting.delay) { 
          window.timer = 0; 
          window.char++; 
          type(); 
          window.startTyping = setInterval(type, setting.speed); 
          window.delaying = false; 
         } else { 
          window.delaying = true; 
          clearInterval(window.startTyping); 
          window.startTyping = null; 
         } 
        } 
       } else { 
        window.timer = window.timer + 50; 
       } 
      }, 50); 
     } 
    }; 
})(jQuery); 

$(function() { 
    $('#title').typingText(); 
    $('#title2').typingText(); 
}); 

코드 문제를 볼 수있는 jsFiddle입니다 : 여기

는 코드입니다.

플러그인 작성에 대한 내 접근 방식으로 뭔가를해야한다는 것을 알고 있지만, 객체 지향 플러그인 작성과 같은 웹에서 몇 가지 제안을 시도했지만 여전히 해결책을 찾지 못했습니다! 어떤 도움이나 제안을 주시면 감사하겠습니다.

Answer 1

대답은 나 자신을 발견했습니다. 개인 변수 나 함수를 개인 변수 또는 함수로 정의해야만 겹쳐 쓰기가되지 않도록 할 수 있었고, 그런 다음 코드 조각을 추가하여 함수는 선택한 모든 요소를 ​​통해 자체를 반복합니다.

이것은 내가 완성 된 최종 코드입니다.

체크 아웃이 jsFiddle 당신은 각 인스턴스에 대해 새로운 클로저를 만들거나`.DATA를 사용하여 요소 인스턴스 특정 변수를 첨부하거나 필요

(function($){ 
//typing effect for text 
//start of the plugin 
var typingTextFunc= function(options, elem){ 
    var setting= $.extend({  
     //the starting point 
     //*(it starts typing when the scrollbar hit the starting point) 
     start:0,  
     //the user given delay character 
     //*(it delays the typing when it hits elem character) ==> *(must be a character not a digit or alphabet) 
     delayChar:'.', 
     //the speed of typer 
     //*(must be at least 50) 
     speed:100, 
     //the delay duration when it hits delaying characters 
     //*(delaying characters are ? ! . and any other given character in delayChar variable) 
     delay:500 
     },options); 
    if(setting.speed<50){ 
     setting.speed=50; 
     } 
    if(setting.delay<100){ 
     setting.delay=100; 
     } 
    setting.delayChar=setting.delayChar.slice(0,1); 
    var that=$(elem); 
    if($(document).scrollTop()>=setting.start){ 
     $(elem).css('display','block'); 
     var text=$(elem).text(); 
     var textLength=text.length; 
     var char=0; 
     $(elem).text(''); 
     $(elem).html('<span class="textLine"></span>'); 
     $(elem).append('<span class="blinkingLine">|</span>'); 
     var blinking=setInterval(function(){ 
      that.children('.blinkingLine').animate({opacity:0},300); 
      setTimeout(function(){ 
       that.children('.blinkingLine').animate({opacity:1},300); 
       },300); 
      },600); 
     var lastChar=''; 
     function type(){ 
      that.children('.textLine').text(text.substr(0,char)); 
      lastChar=that.children('.textLine').text().slice(that.children('.textLine').text().length-1); 
      char++; 
      if(char>textLength){ 
       that.children('.textLine').text(that.children('.textLine').text().substr(0,textLength)); 
       that.children('.blinkingLine').remove(); 
       clearInterval(startTyping); 
       clearInterval(blinking); 
       clearInterval(checking); 
       } 
      } 
     var timer=0; 
     var delaying=false; 
     var startTyping=setInterval(type,setting.speed); 
     var checking= setInterval(function(){ 
      if(typeof delaying=='undefined' || timer>=setting.delay || delaying==false){ 
       if(lastChar=='?' || lastChar=='.' || lastChar=='!' || lastChar==setting.delayChar){      
        if(timer>=setting.delay){        
         timer=0; 
         char++; 
         type(); 
         startTyping=setInterval(type,setting.speed); 
         delaying=false; 
         } 
        else{ 
         delaying=true; 
         clearInterval(startTyping); 
         startTyping=null; 
         } 
        } 
       } 
      else{ 
       timer=timer+50; 
       } 
      },50); 
     } 
    }; 

$.fn.typingText= function(options){ 
    if($(this).data('typed')) return; 
    return $(this).each(function(){ 
     typingTextFunc(options, this); 
     $(this).data('typed',true); 
     }); 
    }; 
//end of the plugin 
}(jQuery)); 

$(function(){ 
    $('#title1').typingText(); 
    $('#title2').typingText(); 
});