javascript - 让 Bouncy 内容过滤器自动运行

Question

我正在使用来自Codyhouse的这个很棒的弹性过滤器但我一生都无法弄清楚如何让它自动运行，即自行翻转并仍然接受用户点击事件。 jsfiddle ...谢谢。

jQuery(document).ready(function($) {
  //wrap each one of your filter in a .cd-gallery-container
  bouncy_filter($('.cd-gallery-container'));

  function bouncy_filter($container) {
    $container.each(function() {
      var $this = $(this);
      var filter_list_container = $this.children('.cd-filter'),
        filter_values = filter_list_container.find('li:not(.placeholder) a'),
        filter_list_placeholder = filter_list_container.find('.placeholder a'),
        filter_list_placeholder_text = filter_list_placeholder.text(),
        filter_list_placeholder_default_value = 'Select',
        gallery_item_wrapper = $this.children('.cd-gallery').find('.cd-item-wrapper');

      //store gallery items
      var gallery_elements = {};
      filter_values.each(function() {
        var filter_type = $(this).data('type');
        gallery_elements[filter_type] = gallery_item_wrapper.find('li[data-type="' + filter_type + '"]');
      });

      //detect click event
      filter_list_container.on('click', function(event) {
        event.preventDefault();
        //detect which filter item was selected
        var selected_filter = $(event.target).data('type');

        //check if user has clicked the placeholder item (for mobile version)
        if ($(event.target).is(filter_list_placeholder) || $(event.target).is(filter_list_container)) {

          (filter_list_placeholder_default_value == filter_list_placeholder.text()) ? filter_list_placeholder.text(filter_list_placeholder_text): filter_list_placeholder.text(filter_list_placeholder_default_value);
          filter_list_container.toggleClass('is-open');

          //check if user has clicked a filter already selected 
        } else if (filter_list_placeholder.data('type') == selected_filter) {

          filter_list_placeholder.text($(event.target).text());
          filter_list_container.removeClass('is-open');

        } else {
          //close the dropdown (mobile version) and change placeholder text/data-type value
          filter_list_container.removeClass('is-open');
          filter_list_placeholder.text($(event.target).text()).data('type', selected_filter);
          filter_list_placeholder_text = $(event.target).text();

          //add class selected to the selected filter item
          filter_values.removeClass('selected');
          $(event.target).addClass('selected');

          //give higher z-index to the gallery items selected by the filter
          show_selected_items(gallery_elements[selected_filter]);

          //rotate each item-wrapper of the gallery
          //at the end of the animation hide the not-selected items in the gallery amd rotate back the item-wrappers

          // fallback added for IE9
          var is_explorer_9 = navigator.userAgent.indexOf('MSIE 9') > -1;

          if (is_explorer_9) {
            hide_not_selected_items(gallery_elements, selected_filter);
            gallery_item_wrapper.removeClass('is-switched');
          } else {
            gallery_item_wrapper.addClass('is-switched').eq(0).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
              hide_not_selected_items(gallery_elements, selected_filter);
              gallery_item_wrapper.removeClass('is-switched');
            });
          }
        }
      });
    });
  }
});

function show_selected_items(selected_elements) {
  selected_elements.addClass('is-selected');
}

function hide_not_selected_items(gallery_containers, filter) {
  $.each(gallery_containers, function(key, value) {
    if (key != filter) {
      $(this).removeClass('is-visible is-selected').addClass('is-hidden');

    } else {
      $(this).addClass('is-visible').removeClass('is-hidden is-selected');
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

我假设“使其自动运行”是指以编程方式触发内容选择动画，而不是要求用户单击。一种可能的解决方案是为选择元素分配一个id，然后将click处理程序直接注册到这些元素，而不是父filter_list_container 。然后，您可以使用 jQuery 的 trigger() 方法来模拟对相应元素的点击。

在 html 中分配一个 id，如下所示:

<a id="green" href="#0">Green</a>

然后像这样注册点击处理程序:

$("#red, #green, #blue").on('click', function(event){ ... }

...并像这样触发:

$("#green").trigger("click");

Here's a JSfiddle举个例子。