在切换时销毁这个jQuery插件

Destroy this jQuery plugin on toggle up

本文关键字：jQuery 插件      更新时间：2023-09-26

我已经破解了这个脚本，它可以切换表行，还添加了Circliful插件(https://github.com/pguso/jquery-plugin-circliful)以在该行打开后设置一些统计数据的动画。这样做效果很好，并在切换的每一行上设置动画。但是，如果我打开一行，关闭同一行，然后重新打开它，统计数据的圆圈都乱了，它会添加另一堆额外的重复圆圈。

因此，我需要知道一旦再次关闭行，如何"结束、杀死、销毁、解除绑定"插件（不确定术语）。然后在重新打开时启动插件。

这是小提琴-http://jsfiddle.net/62x36sk3/

jQuery(function($) {
      $("td[colspan=4]").find(".toggle").hide();
      $("table").click(function(event) {
            event.stopPropagation();
            var $target = $(event.target);
            if ( $target.closest("td").attr("colspan") > 1 ) {
                 $target.slideUp();
            } else {
                 $target.closest("tr").next().find(".toggle").slideToggle();
                 $target.closest("tr").next().find(".win").circliful();
                 $target.closest("tr").next().find(".place").circliful();
            }                    
      });
});

这就是我为你得到的，我看了你使用的插件，它有点奇怪，但我没有时间寻找它的函数来重建。所以一个简单的解决方案是，只要你点击行，就可以重建。

首先清空容器，然后再次调用函数。检查下面的代码，并检查小提琴的更新版本

我还更改了click事件的分配，我将其更改为直接分配给tr，因为它有一个标识符class="info"，关于您使用的内容，它被分配给表中的所有元素，它只会查找最接近的tr。没有什么不同，但这更有效。

$("tr.info").click(function(event) {
            event.stopPropagation();
            var $target = $(event.target);
            if ( $target.closest("td").attr("colspan") > 1 ) {
                 $target.slideUp();
            } else {
                 $target.closest("tr").next().find(".toggle").slideToggle();
                 $target.closest("tr").next().find(".win").html(''); // empty the contents
                 $target.closest("tr").next().find(".win").circliful();
                 $target.closest("tr").next().find(".place").html('');  // empty the content
                 $target.closest("tr").next().find(".place").circliful();
            }                    
});

最简单的方法是在绘制之前清除circliful元素的子元素。它适用于您的样品，这是最新的小提琴-http://jsfiddle.net/62x36sk3/2/。

在circliful函数的顶部添加以下代码。

this.empty();

但也存在一些潜在的问题，一些数据没有被清除，调整大小事件将被多次绑定，所以更好的解决方案是在circliful中实现destroy方法。

试试这个。

(function ($) {
    $.fn.circliful = function (options, callback) {
        var settings = $.extend({
            // These are the defaults.
            startdegree: 0,
            fgcolor: "#556b2f",
            bgcolor: "#eee",
            fill: false,
            width: 15,
            dimension: 200,
            fontsize: 15,
            percent: 50,
            animationstep: 1.0,
            iconsize: '20px',
            iconcolor: '#999',
            border: 'default',
            complete: null,
            bordersize: 10
        }, options);
    return this.each(function () {
        var customSettings = ["fgcolor", "bgcolor", "fill", "width", "dimension", "fontsize", "animationstep", "endPercent", "icon", "iconcolor", "iconsize", "border", "startdegree", "bordersize"];
        var customSettingsObj = {};
        var icon = '';
        var endPercent = 0;
        var obj = $(this);
        var fill = false;
        var text, info;
        // ADDED
        // ***************************************** 
        // already this instance is ran circleful
        if(obj.hasClass('circliful')){
            return;
        }
        // *****************************************
相关文章：