Javascript - 由数组过滤元素不起作用

时间:2017-06-12 15:43:57

标签: javascript jquery

我有一个函数,我在点击过滤器按钮时制作一系列标签。我还想做的是在经过那个数组之后,过滤没有那个类的元素并隐藏它们。但它没有用。

这是代码:

$('.filter-button').click(function() {


$(this).toggleClass('active');

  var activeTags = $('.filter-button.active');
  var tags = [];
  var articles = $('.article-list');

  $(activeTags).each(function() {
    tags.push('.' + $(this).text());
  });

  $(articles).not(tags.join(",")).hide();

});

这是html:

    <div class="small-6 medium-4 large-3 column article-list {% for tag in entry.tags %} {{ tag }} {% endfor %}">
      <img src="{{ entry.topImage.first().getUrl('square') }}" alt="">
      <div class="image-text">
         <h5>{{ entry.title }}</h5>
         <a href="{{ entry.url }}">Les mer</a>
      </div>
    </div>

更新

Gulp没有更新,所以我没有看到它确实有效,但它仍然无法正常工作。元素没有正确切换,一旦隐藏,它们就不会再次显示。不知道为什么,我做错了什么?

这是更新的代码:

$('.filter-button').click(function() {
  $(this).toggleClass('active');

  var activeTags = $('.filter-button.active');
  var tags = [];
  var articles = $('.article-list');

  $(activeTags).each(function() {
    tags.push('.' + $(this).text());
  });

  $(articles).not(tags.join(",")).toggle();

});

1 个答案:

答案 0 :(得分:1)

您已关闭,只需在致电A[0],A[1]之前隐藏文章。

<强> jsFiddle

static int twinArrays(int[] ar1, int[] ar2){

    int first_minimum_ar1 = Integer.MAX_VALUE;
    int second_minimum_ar1 = Integer.MAX_VALUE;
    int index_ar1=-1;

    int first_minimum_ar2 = Integer.MAX_VALUE;
    int second_minimum_ar2 = Integer.MAX_VALUE;
    int index_ar2=-1;


    for(int i=0;i<ar1.length;i++)
    {
        int element = ar1[i];
        if(first_minimum_ar1>=element)
        {
            second_minimum_ar1=first_minimum_ar1;
            first_minimum_ar1=element;
            index_ar1=i;
        }
        else if(second_minimum_ar1>element)
        {
             second_minimum_ar1=element;
        }
    }

    for(int i=0;i<ar2.length;i++)
    {
        int element = ar2[i];
        if(first_minimum_ar2>=element)
        {
            second_minimum_ar2=first_minimum_ar2;
            first_minimum_ar2=element;
            index_ar2=i;
        }
        else if(second_minimum_ar2>element)
        {
             second_minimum_ar2=element;
        }
    }

    if(index_ar2!=index_ar1)
        return first_minimum_ar1+first_minimum_ar2;


    return Math.min(first_minimum_ar1+second_minimum_ar2,first_minimum_ar2+second_minimum_ar1);

}

附注:

  • 从文本值构建数组不是很健壮。按钮上的空格可能会破坏您的选择器。
  • .toggle()已经是一个jQuery对象,所以不需要再次包装它,虽然jQuery会处理这个并且它不会导致问题。