Несколько событий JQuery Click на li - PullRequest
Новая
       9

Несколько событий JQuery Click на li

0 голосов
/ 16 октября 2018

Использование jquery.easypiechart.js с аккордеоном Jquery Я пытаюсь использовать одну и ту же функцию более одного раза в отдельных перечисленных элементах.У каждого из перечисленных моментов есть простой график, и со временем количество ликов увеличивается.На данный момент я использую псевдо-классы в своем скрипте для каждого li, но, очевидно, это ограничено числом набора, которое в конечном итоге будет превзойдено.

Код следующий ...

HTML примера перечисленного элемента 

<li class="st-open" style="height: 491px;">
    <a class="st-animate" href="#" rel="bookmark" title="Stat 10">Stat 10</a>
    <div class="st-content entry-content" itemprop="articleBody" style="display: block;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p>
            <span class="chart" data-percent="86"><span class="percent">86</span>
                <canvas height="220" width="220" style="height: 110px; width: 110px;"></canvas>
            </span>
        </p>
    </div>
</li>

JS 

$("li:nth-of-type(1) .st-animate").click(function() {
        $('li:nth-of-type(1) .chart').easyPieChart({
            easing: 'easeOutBounce',
            animate: 5000,
            onStep: function(from, to, percent) {
                $(this.el).find('.percent').text(Math.round(percent));
            }
        });
    });
    $("li:nth-of-type(2) .st-animate").click(function() {
        $('li:nth-of-type(2) .chart').easyPieChart({
            easing: 'easeOutBounce',
            animate: 5000,
            onStep: function(from, to, percent) {
                $(this.el).find('.percent').text(Math.round(percent));
            }
        });
    });
// and so on...

Как я могу решить проблему отказа от использования псевдо-классов.Любая помощь приветствуется.

1 Ответ

0 голосов
/ 16 октября 2018

Вы можете использовать .closest () и .find () 

$(".st-animate").click(function(e) {
    e.preventDefault();
    $(this).closest('li').find('.chart').easyPieChart({
        easing: 'easeOutBounce',
        animate: 5000,
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
});

Пример примера: - 

$(".st-animate").click(function(e) {
  e.preventDefault();
  alert($(this).closest('li').find('.chart').data('percent'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="st-open" style="height: 491px;">
  <a class="st-animate" href="#" rel="bookmark" title="Stat 10">Stat 10</a>
  <div class="st-content entry-content" itemprop="articleBody" style="display: block;">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
      et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
      culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      <span class="chart" data-percent="86"><span class="percent">86</span>
        <canvas height="220" width="220" style="height: 110px; width: 110px;"></canvas>
      </span>
    </p>
  </div>
</li>
<li class="st-open" style="height: 491px;">
  <a class="st-animate" href="#" rel="bookmark" title="Stat 10">Stat 10</a>
  <div class="st-content entry-content" itemprop="articleBody" style="display: block;">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      <span class="chart" data-percent="87"><span class="percent">86</span>
        <canvas height="220" width="220" style="height: 110px; width: 110px;"></canvas>
      </span>
    </p>
  </div>
</li>
...