Question

我无法让我的过滤表同时更改视图。您可以在此jsfiddle中看到它。暂时忽略重叠文本。

我想要做的是在按一次按钮时将其更改为紧凑或完整视图。当按钮被点击两次时，它会以某种方式工作..这是不正确的。

有什么想法吗？我在jquery上并不擅长，但我可以让事情发挥作用

在底部查看小提琴和功能。

  var $timeBlock = $('.timeBlock'),
      $checkboxes = $('#filters input');

  $timeBlock.isotope({
    itemSelector: '.item'
  });

  $checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function(){
      filters.push( this.value );
    });
    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join(', ');
    $timeBlock.isotope({ filter: filters });
  });

  $('#shuffle').click(function(){
    $timeBlock.isotope('shuffle');
  });

  var $items = $timeBlock.children();

  $("#isotope-reset").click(function(){
      reset();
});


$('#compact').click(function () {
    $('.item').animate({width: "30%"}, 500);
    $('.item').animate({height: "35px"}, 500);
    reset();

});


$('#full').click(function () {
    $('.item').animate({width: "455px"}, 500);
    $('.item').animate({height: "80px"}, 500);
    reset();


});

function reset() {
    $('input[type=checkbox]').attr('checked',false);
    $timeBlock.isotope({
        filter: '*'
    });
}

Answer 1

您需要将函数放入队列。

单击事件执行队列，如果动画完成则再运行。查看callback complete

上的文档

$(document).on('click', '#compact', function () {
    $('.item').animate({width: "30%"}, 500, function() {
        $('.item').animate({height: "35px"}, 500, function() {
            $(this).resetItems();
        });
    });
});


$(document).on('click', '#full', function () {
    $('.item').animate({width: "455px"}, 500, function() {
        $('.item').animate({height: "80px"}, 500, function() {
            $(this).resetItems();
        });
    });
});

事件重置项，如果使用jquery，则将该函数注册到jquery中。没有必要，但给你jquery的好处

$.fn.resetItems = function() {
    $('input[type=checkbox]').attr('checked',false);
    $timeBlock.isotope({
        filter: '*'
    });
}

JSFIDDLE

Jquery过滤器加上运行多个函数

1 个答案: