Question

将jquery.easypiechart.js与Jquery手风琴结合使用，我试图在单独列出的项目中多次使用同一功能。每个列出的时间都有一个easypiechart，随着时间的流逝，li的数量会增加。现在，我在脚本中为每个li使用psuedo类，但是显然，这仅限于最终会超过的设置数。

代码如下...

示例所列项目的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...

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

Answer 1

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

li上的多个JQuery Click事件

1 个答案: