时间戳

首页 > 解决方案 > li上的多个JQuery Click事件

jquery - li上的多个JQuery Click事件

问题描述

将 jquery.easypiechart.js 与 Jquery 手风琴一起使用，我试图在单独列出的项目中多次使用相同的函数。每个列出的时间都有一个简单的饼图，随着时间的推移，li 会增加。现在我在我的脚本中为每个 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...

如何解决不使用伪类的问题。任何帮助表示赞赏。

标签： jqueryaccordionpie-chart

解决方案

您可以使用.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>

推荐阅读