jquery：在第二个插件发生更改后触发一个插件的公共方法

Question

嘿那里..再次需要一些建议:)

我正在开发一个具有可过滤组合的项目[基于此插件链接：www.gethifi.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like -我们的。

投资组合项目显示在水平滑块中，该滑块在浏览器窗口的左侧和右侧添加滚动区域（热点）。

我的问题来了：

滑块的宽度是在插件 smoothdivscroller www.smoothdivscroll.com 中计算的。但是当我通过过滤器导航更改滑块的内容时，滑块的总宽度发生变化，但 smoothdivscroller 插件没有注意到它。

我在 jsfiddle 中为您设置了一个简化的示例，您可以在这里体验整个问题kuemmel-schnur.de/projekte：当显示所有项目（Alle）并且您向右滚动，然后切换到类别“Lehrprojekte”您将看不到任何项目，因为它们位于最左侧，并且不会重新计算容器的总宽度。

为了解决这个问题，我有三个想法，我需要一些认真的帮助。

1）smoothdivscroll插件提供了一个公共方法来重新计算容器的宽度，就像

$("#makeMeScrollable").smoothDivScroll("recalculateScrollableArea");

我每次单击portfolio-list a后都需要触发的那样。我需要将其与滑块自动切换到当前内容的第一个元素的方法结合起来

$("#makeMeScrollable").smoothDivScroll("moveToElement", "first");

2）我的第二个想法 - 因为我不知道1）是否或如何工作 - 是检查网址是否更改，然后触发重新计算。过滤器使用哈希来寻址内容。所以我想我可以读出 url，每次哈希更改后的部分我都可以触发该方法。

3）我可以使用类似的东西将可过滤插件绑定到 smoothDivScroll 插件（注意完全错误的代码:)

$('#portfolio-list').filterable();
 $('#portfolio-filter a').click(function(){
        $('#makeMeScrollable').smoothDivScroll("moveToElement", "first")("recalculateScrollableArea");
});

所以..你觉得怎么样？再次提供 jsfiddle 链接：jsfiddle.net/tobiasmay/QudtF/

谢谢， 托比。

附：我本来可以正确设置链接，但我需要多 1 个声誉点才能发布多于 1 个链接；）

Answer 1

您可以收听该事件 filterportfolio，并从那里重新计算/moveToElement。

$("body").bind("filterportfolio", function()
{
    var
        interval = 50,
        duration = 1000;

    var intervalId = setInterval(function()
    {
        $("#makeMeScrollable").smoothDivScroll("recalculateScrollableArea");

        duration -= interval;

        if(duration <= 0)
        {
            clearInterval(intervalId);
        }
    }, interval);

    $("#makeMeScrollable").smoothDivScroll("moveToElement", "first");
});

在 实时网站 的 JavaScript 控制台中使用它时，它似乎可以工作。将代码块添加到 aks.js 或在 Chrome 中尝试：转到该网站，打开控制台，粘贴代码并按 Enter 键。重现问题中的步骤时应该立即起作用：滚动到右侧，单击过滤器。

编辑：由于过滤中的动画，需要在动画完成后调用.smoothDivScroll(...)。由于如果只调用一次动画可能看起来有点难看，因此将在 duration 毫秒内进行多次重新计算，中间有一个 interval 毫秒。

Answer 2

您可以使用 jQuery 自定义事件：当它更改滑块的内容时，它会执行

$(document).trigger('contentChange');

并在插件中为此事件设置一个处理程序

$(document).bind('contentChange', function(){//这里是改变滑块宽度的代码});

Answer 3

这是我对这个问题的看法。

您可以尝试第二个选项：捕获哈希更改事件

$('window').hashChange(function() {
    $('portfolio-list').filterable();
});

这种方法的唯一缺点是：IE7 本身不支持 hashChange 事件。