javascript - 「Uncaught ReferenceError: container is not defined」という Desandro の新しい石積みの例

Question

私は会社のためにフリーランスのウェブデザインポートフォリオをデザインしています。これは s3 @ http://drootech.com.s3-website-us-west-1.amazonaws.com/dtindex.htmlで静的です

当初、私は古いバージョンの組積造 (jQuery/Javascript を使用してレスポンシブ ポートフォリオを作成) をカスタマイズして、カテゴリ (デザイン、エンジニアリングなど) ごとにさまざまなコンテンツ タイプを除外する機能を使用していました。

正常に動作しているようですが、コンソールに「Uncaught ReferenceError: container is not defined」というエラーが表示されます。

コードは次のとおりです。

$(function (){
var columns = 3,
    setColumns = function() { columns = $( window ).width() > 640 ? 3 : $(window).width() > 320 ? 2 : 1; };

setColumns();
$(window).resize(setColumns);
    var $container = $('#portfoliocontainer');
    $container.imagesLoaded(function(){
      var msnry = new Masonry( container, {
        itemSelector : '.item',
    columnWidth:  function( containerWidth ) { return containerWidth / columns;
    }
      });
});

});

状況に関するあらゆる種類のヘルプまたはライトをいただければ幸いです。なぜエラーが発生するのかわかりません。

編集次のコードでエラーを修正しました。

// responsive masonry function
$(function msnry(){
var columns = 3,
setColumns = function() { columns = $( window ).width() > 640 ? 3 : $(window).width() >    320 ? 2 : 1; };
setColumns();
$(window).resize(setColumns);

    // layout Masonry again after all images have loaded
    var $container = $('#portfoliocontainer').masonry();
    var msnry;
    $container.imagesLoaded( function(){
    var container = document.querySelector('#portfoliocontent')
    msnry = new Masonry( container, {
    itemSelector : '.item',
    columnWidth:  function( containerWidth ) { return containerWidth / columns;}
      });
});
$('.expandi').click(function(){
    $('.expand').slideDown('fast');
    $(this).siblings('ul').toggle();
});
$('.engineeringiC').click(function(){
    if($('div.item').hasClass('designshwr')){
    masonry.hide(($this));
    $container.masonry('reloadItems');
}
});
});
    $("#seemore").click(function (){
        //$(this).animate(function(){
            $('html, body').animate({
                scrollTop: $("#mrkting").offset().top - 85
                 }, 2000);
        //});
    });
    $("#home").click(function (){
        //$(this).animate(function(){
            $('html, body').animate({
                scrollTop: $(".masthead").offset().top - 85
                 }, 2000);
        //});
    });
$("#info").click(function (){
        //$(this).animate(function(){
            $('html, body').animate({
                scrollTop: $("#mrkting").offset().top - 85
                 }, 2000);
        //});
    });
    $("#portfolio").click(function (){
        //$(this).animate(function(){
            $('html, body').animate({
                scrollTop: $("#portfolioo").offset().top - 85
                 }, 2000);
        //});
    });
    $("#menui").click(function (){
        //$(this).animate(function(){
            $('#navbar').addClass('slicknav');
            $('#navbar').slideDown('fast');
        //});
    });
    $("#socialmedia").click(function (){
            $("#myModal").modal('show');
    });
  $(window).scroll(function(){
  if ($(this).scrollTop() > 1080) {
  $('#contentnav').fadeIn('fast');
  $('#contentnav').addClass('dynamicnav');
}
if ($(this).scrollTop() > 400) {
   $('#navbar').slideUp('fast');
   $('#navbarm').slideDown('fast');
} if ($(this).scrollTop() < 1080) {
   $('#contentnav').removeClass('dynamicnav');
}

});

上記のコードで div エンジニアリング iC をクリックすると、「designshwr」クラスを持つものはすべて非表示になります。

$('.engineeringiC').click(function(){
    if($('div.item').hasClass('designshwr')){
    masonry.hide(($this));
    $container.masonry('reloadItems');
}
});

しかし、私はそれを機能させるのに非常に苦労しています。何か考えや提案はありますか？PS 書き直す必要がある expandi 関数は無視してください。