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)が1より大きいかどうかを確認できます。真の場合は、init()と呼び出してください。両方のノードが要素に追加された場合も、init関数を呼び出す.on()を使用してthisにDOMSubtreeModifiedイベントを添付することができますし、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)); 
      }); 
     } 
     }); 
    }