0

Всем привет! Есть код:

jQuery(document).on('ready', function() {
  // milestone count		
  $.fn.countUp = function(options) {
    $('.count').each(function() {
      var defaults = {
          startVal: 0,
          endVal: $(this).attr("data-count"),
          decimals: 0,
          duration: 1.5,
          options: {
            useEasing: true,
            useGrouping: true
          }
        },
        options = $.extend({}, defaults, options);
      var mile_count = new countUp(this, options.startVal, options.endVal, options.decimals, options.duration, options.options);
      $(this).one("inview", function(e) {
        mile_count.start();
      })
    })
  };
  $('.count').each(function() {
    $(this).countUp();
  });
});
.section-bg-color {
  background-color: #f3f5f8;
}
.remove-border {
  overflow: hidden;
}
.remove-border >div {
  margin-left: -1px !important;
  margin-top: -1px !important;
}
.remove-border-top {
  overflow: hidden;
}
.remove-border-top >div {
  margin-top: -1px !important;
}
.no-margin {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.margin-bottom-140 {
  margin-bottom: 140px;
}
.no-padding {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.mile-content {
  border-left: 1px solid;
  border-color: #d5d5d5;
  margin-top: 140px;
}
.mile-description {
  display: table;
  margin: auto;
  margin-bottom: 5px;
}
.mile-icon {
  display: table-cell;
  text-align: right;
  vertical-align: middle;
}
.mile-count {
  display: table-cell;
  text-align: left;
}
.mile-icon i {
  line-height: 1;
  padding: 0 10px;
}
.mile-count p {
  margin: 0;
  padding: 0 10px;
  font-size: 45px;
}
.mile-count .count {
  margin: 0;
}
.mile-title p {
  margin: 0;
}
.medium-icon {
  font-size: 45px;
}
.count {
  color: #f0f0f0;
}
.primary-typo {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 400;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Milestone -->
<section id="milestone" class="milestone section-bg-color">
  <div class="container">
    <div class="remove-border">
      <div class="row no-margin margin-bottom-140">
        <div class="col-sm-6 col-md-3 no-padding">
          <div class="mile-content">
            <div class="mile-description">
              <div class="mile-icon">
                <i class="ion-ios-cloudy-night-outline medium-icon"></i>	
              </div>
              <div class="mile-count">
                <h3 class="count" data-count="512">512</h3>
              </div>
            </div>
            <div class="mile-title text-center">
              <p class="primary-typo">Sleepless hours</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3 no-padding">
          <div class="mile-content">
            <div class="mile-description">
              <div class="mile-icon">
                <i class="ion-ios-eye-outline medium-icon"></i>	
              </div>
              <div class="mile-count">
                <h3 class="count" data-count="98">98</h3>
              </div>
            </div>
            <div class="mile-title text-center">
              <p class="primary-typo">Cups of Coffee</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3 no-padding">
          <div class="mile-content">
            <div class="mile-description">
              <div class="mile-icon">
                <i class="ion-ios-chatboxes-outline medium-icon"></i>	
              </div>
              <div class="mile-count">
                <h3 class="count" data-count="37">37</h3>
              </div>
            </div>
            <div class="mile-title text-center">
              <p class="primary-typo">Feedback</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3 no-padding">
          <div class="mile-content">
            <div class="mile-description">
              <div class="mile-icon">
                <i class="ion-ios-clock-outline medium-icon"></i>	
              </div>
              <div class="mile-count">
                <h3 class="count" id="count" data-count="60">60</h3>
              </div>
            </div>
            <div class="mile-title text-center">
              <p class="primary-typo">Days of Work</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

На выходе получаю ошибку: "Uncaught TypeError: Cannot read property 'fn' of undefined"

1 ответ 1

1

Вы не совсем верно пытаетесь создать плагин к jQuery. Это следует делать иначе:

$.fn.countUp = function(options) {
    var defaults = {
        startVal: 0,
        decimals: 0,
        duration: 1.5,
        options: {
            useEasing: true,
            useGrouping: true
        }
    };

    return this.each(function() {
        var $this = $(this);

        options = $.extend({}, defaults, options);
        if (!options.endVal)
            options.endVal = $this.data('count');

        var mile_count = new countUp(
            this,
            options.startVal,
            options.endVal,
            options.decimals,
            options.duration,
            options.options);

        $this.one('inview', function(e) {
            mile_count.start();
        });
    });
};

$('.count').countUp();

Кстати, в данном примере я предполагал, что обращение к методу jQuery() возможно через сокращенный вариант $ (иначе используйте jQuery), а также, что некая функция countUp и событие inview существуют в заданном контексте.

1
  • при использовании (function($){})(jQuery); ошибка ушла, но счетчик по прежнему не работает.. подключаю в дочерней теме wordpressa если это поможет подсказать. сам путь подключен верно, т.к. console.log отрабатывает
    – Вася
    13 апр 2015 в 10:47

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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