Как реализовать счетчик в плагине jquery

444
19 ноября 2017, 17:43

Поставила себе задачу: Плагин меняющий текст элемента по клику, данные берет из пользовательского массива. Эдакий toggle text (Изъяснилась наверное сухо, но на примере ниже думаю будет понятно)

$('.slowpock').toggleText(['text','text2','text3'])

Проблема возникла в реализации замыкания. Не могу понять как реализовать этот самый счетчик в рамках jquery плагина (опыта маловато ^-^).

То что имею на данный момент: 

(function( $ ){
  $.fn.toggleText = function(text) {
    if (arguments.length < 0) {
      return false;
    }
    var counter = 1; /*:(*/
    return this.each(function() { 
      var $this = $(this);
      $this.html(text[0])
    });
  };
})( jQuery );
Answer 1

(function($){ 
  $.fn.toggleText = function(text) { 
    if (arguments.length < 0) return false; 
    return this.each(function() { 
      var $this = $(this); 
      // Счетчик у каждого элемента свой. поэтому кладём внутрь цикла. 
      var counter = 0; 
      $this.click(e => { 
          if(counter >= text.length) counter = 0; 
          $this.html(text[counter++]); 
      }); 
    }); 
  }; 
})(jQuery); 
 
$('.slowpock').toggleText(['text','text2','text3'])
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='slowpock'>test1</div> 
<div class='slowpock'>test2</div>

Answer 2

(function( $ ){ 
   $.fn.toggleText = function(text) { 
     // ... some checks 
     
     var counter = 0; /*:)*/ 
    
     this.click(function() {  
       var $this = $(this); 
       $this.html(text[counter++]); 
       if (counter >= text.length) 
         counter = 0;  
     }); 
    
     return this; 
  }; 
})( jQuery ); 
 
$("div").toggleText(["One", "Two", "Three"]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div>start 1</div> 
<div>start 2</div>

READ ALSO
работа модуля path NodeJs
javascript

работа модуля path NodeJs

Собираю путь с помощью pathjoin возвращает нормальный путь fotoTest\girl\shoes

 329
Привязать контекст правильно JS [дубликат]
javascript

Привязать контекст правильно JS [дубликат]

На данный вопрос уже ответили:

 241
Сохранение и чтение из хранилища сессий
javascript

Сохранение и чтение из хранилища сессий

Не могу понять, где и в чём ошибкаХочу сохранить в сессию страницы нажатые кнопки фильтров, чтобы после перезагрузки страницы и т

 496
Tabs внутри slick slider
javascript

Tabs внутри slick slider

Есть вот такой простой скрипт для tabs, по клику разворачивает и сворачивает текстРаботает хорошо, но проблема когда вставляю этот таб в slick slider

 358