javascript - Isotope JS Error - Stack Overflow

admin管理员组

文章数量:1333618

Need a bit of help with a Js error I am getting please:

Uncaught TypeError: $portfolio.isotope is not a function

  
//ISOTOPE FUNCTION - FILTER PORTFOLIO FUNCTION

    $portfolio = $('.portfolio-items');
    $portfolio.isotope({
        itemSelector : 'li',
        layoutMode : 'fitRows'
    });
    $portfolio_selectors = $('.portfolio-filter >li>a');
    $portfolio_selectors.on('click', function(){
        $portfolio_selectors.removeClass('active');
        $(this).addClass('active');
        var selector = $(this).attr('data-filter');
        $portfolio.isotope({ filter: selector });
        return false;
    });

Need a bit of help with a Js error I am getting please:

Uncaught TypeError: $portfolio.isotope is not a function

  
//ISOTOPE FUNCTION - FILTER PORTFOLIO FUNCTION

    $portfolio = $('.portfolio-items');
    $portfolio.isotope({
        itemSelector : 'li',
        layoutMode : 'fitRows'
    });
    $portfolio_selectors = $('.portfolio-filter >li>a');
    $portfolio_selectors.on('click', function(){
        $portfolio_selectors.removeClass('active');
        $(this).addClass('active');
        var selector = $(this).attr('data-filter');
        $portfolio.isotope({ filter: selector });
        return false;
    });

• javascript
• jquery

Share Improve this question Follow edited Jun 25, 2015 at 16:25 HaveNoDisplayName 8,517106106 gold badges4040 silver badges5050 bronze badges asked Jun 25, 2015 at 11:32 user2202463user2202463 13511 gold badge22 silver badges1212 bronze badges 6

• Has isotope loaded before you run this script? – Turnip Commented Jun 25, 2015 at 11:51
• Yes, Isotope has loaded. But on the page itself it shows no errors, only on pages without the isotope gallery. – user2202463 Commented Jun 25, 2015 at 12:03
• So you are running this on pages that don't contain any .portfolio-items elements? – Turnip Commented Jun 25, 2015 at 12:05
• yes... as the Js is in a global script which is linked on all pages – user2202463 Commented Jun 25, 2015 at 12:06
• 1 Wrap your code form line 2 down in a length check: if ($portfolio.length) { ...rest of your code... } this will prevent it from running on pages that don;t contain the required elements – Turnip Commented Jun 25, 2015 at 12:09

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 4

If you don't want your script to run on pages that don't contain the required elements (.portfolio-items), you can run your script conditionally based on the length property of your element collection stored in $portfolio:

$portfolio = $('.portfolio-items');

if ($portfolio.length) { // if 'length' is non zero. Enter block...

    $portfolio.isotope({
        itemSelector : 'li',
        layoutMode : 'fitRows'
    });
    $portfolio_selectors = $('.portfolio-filter >li>a');
    $portfolio_selectors.on('click', function(){
        $portfolio_selectors.removeClass('active');
        $(this).addClass('active');
        var selector = $(this).attr('data-filter');
        $portfolio.isotope({ filter: selector });
        return false;
    });

}

本文标签： javascriptIsotope JS ErrorStack Overflow