0

Поставила себе задачу: Плагин меняющий текст элемента по клику, данные берет из пользовательского массива. Эдакий 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 );

2 ответа 2

0

(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>

3
  • Про счетчик хорошее замечание, спасибо. 17 ноя 2017 в 14:46
  • а если нужно чтобы событие клик было из-вне: ` $('span').click(function() { $(this).toggleText(['1', '2']) });` 17 ноя 2017 в 15:58
  • @AnnaKamardiner $('span').click();
    – user176262
    17 ноя 2017 в 17:44
0

(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>

5
  • Мне кажется этот вариант не пройдет.. counter будет обновлять к нулю каждый клик. (Только что протестировала ваш вариант, хотя ваш кодстайл изящен. Я пока пишу более громоздко) 17 ноя 2017 в 14:33
  • @AnnaKamardiner Взгляните на работающий пример. Вам нужна сквозная ротация строк текста, или для каждого элемента в выборке - своя?
    – user176262
    17 ноя 2017 в 14:35
  • О, а обновленный вариант меня порадовал )) Спасибо. 17 ноя 2017 в 14:35
  • Да сквозная ратация самое то 17 ноя 2017 в 14:36
  • Ну суть я уловила, спасибо. 17 ноя 2017 в 14:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.