1

我一直在为我的公司设计一个自由网页设计组合。在 s3 @ http://drootech.com.s3-website-us-west-1.amazonaws.com/dtindex.html上是静态的

最初，我一直在定制旧版本的 masonry（使用 jQuery/Javascript 来创建响应式作品集），能够按类别（设计、工程等）过滤掉各种内容类型。

它似乎工作正常，但是我在控制台中收到错误“未捕获的 ReferenceError：未定义容器”

这是代码：

$(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 engineeringiC 时，我试图对上面的代码执行的操作是隐藏具有“designshwr”类的所有内容。

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

但我很难让它发挥作用。有什么想法或建议吗？PS忽略我需要重写的expandi函数。

4

0 回答 0