javascript jquery 同位素过滤器完成后触发警报
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12715533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
trigger alert after jquery isotope filter completes
提问by David
I have jquery isotope setup and have created some filters. When i create I select a filter, isotope does a nice little animation. I want to trigger an alert at the end of the animation.
我有 jquery 同位素设置并创建了一些过滤器。当我创建时，我选择了一个过滤器，isotope 做了一个漂亮的小动画。我想在动画结束时触发警报。
This example demostrates the animation that occurs:
此示例演示了发生的动画：
http://isotope.metafizzy.co/demos/filtering.html
http://isotope.metafizzy.co/demos/filtering.html
Any ideas?
有任何想法吗？
Here is the code for the on click of a filter:
这是点击过滤器的代码：
$('.filter').on( 'click', 'a', function( event ) {
event.preventDefault();
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
// console.log('hello world');
var $optionSet = $this.parents('.option-set');
var group = $optionSet.attr('data-filter-group');
options.comboFilters[ group ] = $this.attr('data-filter-value');
$.bbq.pushState( options );
// COUNT
var $filtered = $('#isotope-container').data('isotope').$filteredAtoms;
// get count of all filtered item
alert($filtered.length);
// get count of all filtered items that match a selector
//$filtered.filter('.blue').length;
});
回答by fk_
Since v1.5 (changelog), Isotope provides a callback to do just that; it is described in Isotope's Introduction(just search the page for callback):
从 v1.5 ( changelog) 开始，Isotope 提供了一个回调来做到这一点；它在Isotope 的介绍中进行了描述（只需在页面中搜索callback）：
Additionally you can specify a callback after the options object. This function will be triggered after the animation has completed.
此外，您可以在选项对象之后指定回调。该函数将在动画完成后触发。
onAnimationFinished = function(){
// code to be executed after the animation finishes
};
$('#container').isotope({ filter: '.my-selector' }, onAnimationFinished);
For live examples take a look at this jsFiddlewhich throws an alert when changing a filter via the checkbox inputs or peep Isotope's Callback Testsource and search for changeBGColor.
有关实时示例，请查看此 jsFiddle，它在通过复选框输入更改过滤器或查看Isotope 的回调测试源并搜索changeBGColor.
回答by nbonniot
None of them worked for me. Instead, I used what is explained in event sections : http://isotope.metafizzy.co/events.html
他们都没有对我来说有效。相反，我使用了事件部分中解释的内容：http: //isotope.metafizzy.co/events.html
function onLayout() {
// What to do when layout fully rendered
}
// bind event listener
$isotope.isotope( 'on', 'layoutComplete', onLayout );
回答by mhkeller
This didn't work for me using Isotope 2.0. I'm also not using jQuery so perhaps the usage is different with vanilla JS.
这对使用 Isotope 2.0 的我不起作用。我也没有使用 jQuery，所以可能用法与 vanilla JS 不同。
Either way, if anyone runs into this problme, I got it to work using 2.0's event callback: iso.on('layoutComplete', myFunction).
无论哪种方式，如果有人运行到这个problme，我得到了它使用2.0的事件回调的工作：iso.on('layoutComplete', myFunction)。
More info on Isotope events: http://isotope.metafizzy.co/events.html
有关同位素事件的更多信息：http: //isotope.metafizzy.co/events.html
回答by arrow
None of these worked for me. I'm not sure if it's the latest version of Isotope, and/or jQuery 2.1.1. Regardless, I found a solution on github:
这些都不适合我。我不确定它是否是最新版本的 Isotope 和/或 jQuery 2.1.1。无论如何，我在github上找到了一个解决方案：
$isotope.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", myFunction);
$isotope.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", myFunction);
