Question

我有2个部分，每个部分都有一个图像过滤器，但是当我按下按钮来过滤图像时，让我们从过滤器2中说，它也会隐藏过滤器1中的所有图像。我正在使用：data-filter =“。categoryofimages”

您可以直接在网站上看到问题：

nimvoker.com

在“成就”部分是第一个过滤器，“艺术与设计技能”是第二个过滤器。

由于格式（jpg，png等），某些文件路径不正确，但它仍然显示“缺少图像”符号，因此在解决问题方面无关紧要。

两个过滤器必须独立工作。

以下是2个过滤冲突的示例：

http://codepen.io/anon/pen/NPvdBw

这是js：

$(function(){
// Filter portfolio
$(window).load(function(){
    var $container = $('.popup-portfolio'); 

    $container.css({visibility:'visible'});

    var isotopePortfolio = function(filter){
        $container.isotope({ 
            filter: filter, 
            animationOptions: { 
                duration: 750, 
                easing: 'linear', 
                queue: false
            },
            masonry: {
                isFitWidth: true,
                isResizable: true,
                gutter: 15
            }
        }); 
    };

    isotopePortfolio('*');

    $('.filter-portfolio a').click(function(e){ 
        e.preventDefault();

        $('.filter-portfolio li').removeClass('active');

        $('.filter-portfolio a').removeClass('disabled');

        $(this).parent('li').addClass('active');

        $(this).addClass('disabled');

        var selector = $(this).attr('data-filter'); 

        isotopePortfolio(selector);
    }); 
});

// Only animate elements when using non-mobile devices    
if (jQuery.browser.mobile === false) 
{
    $('.portfolio-item > .inner-content').each(function(i)
    {            
        var element = $(this),
        itemsDelay   = ( isNaN($(this).data('animation-delay')) ? 50 : $(this).data('animation-delay') );
        element.css('opacity', 0).one('inview', function(isInView) {
            if (isInView)
            {
                setTimeout(function(){
                    element.addClass('animated fadeInUp').css('opacity', 1);
                } , itemsDelay * i);
            }
        });
    });
}

$('.popup-portfolio').magnificPopup({
    delegate: 'a',
    type: 'image',
    fixedContentPos: false,
    gallery: {
        enabled: true,
        preload: [0,2],
        navigateByImgClick: true,
        arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
        tPrev: 'Previous (Left arrow key)',
        tNext: 'Next (Right arrow key)'
    }
});

}）;

Answer 1

这需要查看很多代码，但至少要为文件提供其他一些细节 http://nimvoker.com/assets/js/features/portfolio.js 有这个：

    var isotopePortfolio = function(filter){
        $container.isotope({ 
            filter: filter, 
            animationOptions: { 
                duration: 750, 
                easing: 'linear', 
                queue: false
            },
            masonry: {
                isFitWidth: true,
                isResizable: true,
                gutter: 15
            }
        }); 
    };
    $('.filter-portfolio a').click(function(e){ 
        e.preventDefault();

        $('.filter-portfolio li').removeClass('active');

        $('.filter-portfolio a').removeClass('disabled');

        $(this).parent('li').addClass('active');

        $(this).addClass('disabled');

        var selector = $(this).attr('data-filter'); 

        isotopePortfolio(selector);
    });

这很好，但问题是＃rj-portfolio3和#rj-portfolio中的过滤器都有相同的类。

如果我正确读取此内容，您可以在数据过滤器中添加文本选择器，这样您可能希望尝试更精确一点

并使您的过滤器按钮如下：

 <a href="#rj-portfolio3" data-filter="#rj-portfolio3 .lifedrawing" class="btn btn-custom">LifeDrawing</a>

很难用如此多的代码测试而且没有小提琴，所以如果我离开基地，请原谅我。

编辑：再看一遍，＃rj-portfolio3 id远远高于树中的$container，所以你需要做更多的工作...尝试类似

<a href="#rj-portfolio3" data-filter=".lifedrawing:not(.achievements)" class="btn btn-custom">LifeDrawing</a>

等等所有按钮，然后为所有图像添加每个相应缩略图的“成就”和“艺术”类。根据{{3}}，这应该会更好......再次抱歉难以测试，没有小提琴，代码太多。

Answer 2

你的代码中有这一行：

var $container = $('.isotope')

这意味着$container变量将包含所有.isotope div（在本例中为两个）。现在，过滤器处理程序中的以下行：

$container.isotope({ filter: filterValue });

对两个元素应用过滤器。

解决方案：使用jQuery识别被点击的.button-group并在相应的.isotope上应用过滤器：

// generalized function to handle toggle checked and
// apply filter functions for all button groups
$('.button-group').on('click', 'button', function() {
  var $buttonGroup = $(this).closest(".button-group");
  // toggle checked
  $buttonGroup.find('.is-checked').removeClass('is-checked');
  $(this).addClass('is-checked');
  // apply filter
  var filterValue = $(this).attr('data-filter');
  filterValue = filterFns[filterValue] || filterValue;
  $buttonGroup.next(".isotope").isotope({ filter: filterValue });
});

Answer 3

这种情况正在发生，因为您使用相同的ID / CLASS。

示例：

var $container = $('.isotope').isotope({
  itemSelector: '.element-item',
  layoutMode: 'fitRows'
});

用于#filters和＃filters2

$('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$container.isotope({ filter: filterValue });
});
$('#filters2').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$container.isotope({ filter: filterValue });
});

尝试这样的事情。

在此HTML上添加一个唯一的ID＆＃39; ID =＆＃34;唯一ID-1＆＃34; ＆＃39;

<div class="filter-portfolio">
  <ul id="unique-id-1" class="list-unstyled">
    <li class="active page-scroll"> <a href="#rj-portfolio" data-filter="*" class="btn btn-custom disabled">All</a> </li>
    <li class="page-scroll"> <a href="#rj-portfolio" data-filter=".college" class="btn btn-custom">College</a> </li>
    <li class="page-scroll"> <a href="#rj-portfolio" data-filter=".highschool" class="btn btn-custom">Highschool</a> </li>
    <li class="page-scroll"> <a href="#rj-portfolio" data-filter=".childhood" class="btn btn-custom">Childhood</a> </li>
  </ul>
</div>
<div id="unique-id-1-portfolio" class="popup-portfolio three-columns">
  <div class="portfolio-item grow illustration calligraphy">
    <div class="inner-content">
      <div class="portfolio-content">
        <div class="portfolio-detail"> <a href="../../assets/img/rj-portfolio/artanddesign/calligraphy/calligraphy-sample-001.jpg" title="Hover Effect 1 - Grow">
          <div class="portfolio-text">
            <h4>The Title</h4>
            <p>Subtitle</p>
          </div>
          </a> </div>
      </div>
      <img src="../../assets/img/rj-portfolio/artanddesign/calligraphy/calligraphy-sample-001.jpg" alt="" class="img-responsive"/> </div>
  </div>
  <div class="portfolio-item grow illustration calligraphy">
    <div class="inner-content">
      <div class="portfolio-content">
        <div class="portfolio-detail"> <a href="../../assets/img/rj-portfolio/artanddesign/calligraphy/calligraphy-sample-002.jpg" title="Hover Effect 1 - Grow">
          <div class="portfolio-text">
            <h4>The Title</h4>
            <p>Subtitle</p>
          </div>
          </a> </div>
      </div>
      <img src="../../assets/img/rj-portfolio/artanddesign/calligraphy/calligraphy-sample-002.jpg" alt="" class="img-responsive"/> </div>
  </div>
</div>

使用此：

$('#unique-id-1 li a').on( 'click', 'button', function() {
    var filterValue = $( this ).attr('data-filter'); 
    filterValue = filterFns[ filterValue ] || filterValue;
    $( '#unique-id-1-portfolio' ).isotope({ filter: filterValue });
});

并为此

<div class="filter-portfolio">
  <ul id="unique-id-2" class="list-unstyled">
    <li class="active page-scroll"> <a href="#rj-portfolio3" data-filter="*" class="btn btn-custom disabled">All</a> </li>
    <li class="page-scroll"> <a href="#rj-portfolio3" data-filter=".calligraphy" class="btn btn-custom">Calligraphy</a> </li>
    <li class="page-scroll"> <a href="#rj-portfolio3" data-filter=".lifedrawing" class="btn btn-custom">LifeDrawing</a> </li>
    <li class="page-scroll"> <a href="#rj-portfolio3" data-filter=".logodesign" class="btn btn-custom">LogoDesign</a> </li>
    <li class="page-scroll"> <a href="#rj-portfolio3" data-filter=".manga" class="btn btn-custom">Manga</a> </li>
    <li class="page-scroll"> <a href="#rj-portfolio3" data-filter=".marketing" class="btn btn-custom">Marketing</a> </li>
    <li class="page-scroll"> <a href="#rj-portfolio3" data-filter=".miscart" class="btn btn-custom">Miscart</a> </li>
    <li class="page-scroll"> <a href="#rj-portfolio3" data-filter=".technical" class="btn btn-custom">Technical</a> </li>
    <li class="page-scroll"> <a href="#rj-portfolio3" data-filter=".uidesign" class="btn btn-custom">UIdesign</a> </li>
  </ul>
</div>
<div id="unique-id-2-portfolio" class="popup-portfolio three-columns">
  <div class="portfolio-item grow illustration calligraphy">
    <div class="inner-content">
      <div class="portfolio-content">
        <div class="portfolio-detail"> <a href="../../assets/img/rj-portfolio/artanddesign/calligraphy/calligraphy-sample-001.jpg" title="Hover Effect 1 - Grow">
          <div class="portfolio-text">
            <h4>The Title</h4>
            <p>Subtitle</p>
          </div>
          </a> </div>
      </div>
      <img src="../../assets/img/rj-portfolio/artanddesign/calligraphy/calligraphy-sample-001.jpg" alt="" class="img-responsive"/> </div>
  </div>
  <div class="portfolio-item grow illustration calligraphy">
    <div class="inner-content">
      <div class="portfolio-content">
        <div class="portfolio-detail"> <a href="../../assets/img/rj-portfolio/artanddesign/calligraphy/calligraphy-sample-002.jpg" title="Hover Effect 1 - Grow">
          <div class="portfolio-text">
            <h4>The Title</h4>
            <p>Subtitle</p>
          </div>
          </a> </div>
      </div>
      <img src="../../assets/img/rj-portfolio/artanddesign/calligraphy/calligraphy-sample-002.jpg" alt="" class="img-responsive"/> </div>
  </div>
</div>

使用此：

$('#unique-id-2 li a').on( 'click', 'button', function() {
    var filterValue = $( this ).attr('data-filter'); 
    filterValue = filterFns[ filterValue ] || filterValue;
    $( '#unique-id-2-portfolio' ).isotope({ filter: filterValue });
});

希望这会对你有帮助..

jQuery - 同一页面上的多个图像过滤器

3 个答案: