UL에 하나 이상의 li가있는 경우에만 매개 변수를 전달하여 기본값을 변경하고 조건을 실행할 수 있습니까?

Question

JS

(function($) { 
$.fn.newsfader = function(opts) { 
    // default configuration 
    var config = $.extend({}, { 
     fadeInTime: 800, 
     fadeOutTime: 800, 
     interval: 5600 
    }, opts); 
    // main function 
    function init(obj) { 
     var dNewsticker = obj; 
     var dFrame = dNewsticker.find('.js-frame'); 
     var dItem = dFrame.find('.js-item'); 
     var dCurrent; 
     var stop = false; 

     dItem.eq(0).addClass('current'); 
     dItem.eq(0).show(); 

     var move = setInterval(function(){ 
      if(!stop){ 
       dCurrent = dFrame.find('.current'); 
       dCurrent.fadeOut(config.fadeOutTime, function(){ 
        if(dCurrent.next().length !== 0){ 
         dCurrent.removeClass('current'); 
         dCurrent.next().addClass('current'); 
         dCurrent.next().fadeIn(config.fadeInTime); 
        } 
        else{ 
         dCurrent.removeClass('current'); 
         dItem.eq(0).addClass('current'); 
         dItem.eq(0).fadeIn(config.fadeInTime); 
        } 
       }); 
      } 
     }, config.interval); 

     dNewsticker.on('mouseover mouseout', function(e){ 
      if(e.type == 'mouseover'){ 
       stop = true; 
      } 
      else{ 
       stop = false; 
      } 
     }); 
    } 
    // initialize every element 
    this.each(function() { 
     init($(this)); 
    }); 
    return this; 
}; 
// start 
$(function() { 
    $('.js-newsticker').newsfader(
    //How can i make it work with the new time 
    //fadeInTime: 100, fadeOutTime:100 

); 
}); 
})(jQuery); 

HTML

<div class="newsticker js-newsticker"> 
<ul class="js-frame"> 
    <li class="js-item">Google shares top $1,000 after strong earnings.</li> 
    <li class="js-item">Sleep 'cleans' the brain of toxins.</li> 
    <li class="js-item">Amaze project aims to take 3D printing 'into metal age'.</li> 
</ul> 
</div> 

Codepen

어떻게 매개 변수를 덮어 쓸 수 있습니다. fadeInTime을 변경하여 코드를 재사용하고 싶습니까? 만에 상태가 ul

Answer 1

에 하나 이상의 li는 기본 설정을 변경 예를 들어, 플러그인 내에서 사용하기 위해 설정하는 속성과 값으로 작동 할 수있는 개체를 전달할 수있을 때 실행

$(".js-newsticker").newsfader({fadeInTime: 100, fadeOutTime:100}); 

당신 .length이 $("li", this)보다 큰지 확인하려면 true 인 경우 init()으로 전화하십시오. `$의 .fn.newsfader = 기능 : 당신은 또한 두 노드가 요소에 추가하고 this 부모 요소의 li 요소의 .length보다 큰 1

if ($("li", this).length > 1) { 
     this.each(function() { 
     init($(this)); 
     }); 
    } else { 
     this.on("DOMSubtreeModified", function() { 
     if ($("li", this).length > 1) { 
      $(this).off("DOMSubtreeModified").each(function() { 
      init($(this)); 
      }); 
     } 
     }); 
    }