使用Javascript函数

问题描述：

我正在创建函数Bricks（）。它在第一次被调用时起作用，但是当我稍后用另一个事件调用它时，我得到一个错误，指出Bricks（）没有被定义。我可能做错了什么？使用Javascript函数

函数创建：

<script> 
    $(document).ready(function(){ 
     function Bricks() { 
      var $container = $('#timeline-posts-wrap'); 
      $container.imagesLoaded(function(){ 
       $container.masonry({ 
        itemSelector:'.post-wrap' 
       }); 
      });   
     }  
     Bricks(); 
    }); 
</script>

呼吁后来：

<script> 
    $(document).ready(function() { 
     $(".comment-button").click(function() { 
      $(this).parents(".post-bottom").find(".commenting-area").toggle();   
       Bricks();   
     }); 
    }); 
</script>

“它似乎并没有工作”你需要做更多的调试并解释究竟发生了什么！ –

因为**范围**。 –

答

因为函数Bricks在闭合范围（DOM的准备处理程序）被定义所以这将是可用的DOM准备处理程序内只要。

如果你想在不同的作用域使用它，你需要在共享作用域中定义函数，在这种情况下你可以使用全局作用域（window scope），即在dom ready handler之外定义函数

function Bricks() { 

    var $container = $('#timeline-posts-wrap'); 

    $container.imagesLoaded(function() { 
     $container.masonry({ 
      itemSelector: '.post-wrap' 
     }); 
    }); 

} 

$(document).ready(function() { 
    Bricks(); 
});

通过@AlienArrays提出另一解决方案是两个文件准备处理程序的内容移动到一个，使得它们两者将共享相同的封闭范围

$(document).ready(function() { 
    function Bricks() { 
     var $container = $('#timeline-posts-wrap'); 
     $container.imagesLoaded(function() { 
      $container.masonry({ 
       itemSelector: '.post-wrap' 
      }); 
     }); 
    } 

    Bricks(); 

    $(".comment-button").click(function() { 
     $(this).parents(".post-bottom").find(".commenting-area").toggle(); 
     Bricks(); 
    }); 
});

答

为了能够在全球范围内引用您的功能，必须在全球范围进行定义：

$(document).ready(function(){ 

    window.Bricks = function() { 

     var $container = $('#timeline-posts-wrap'); 

     $container.imagesLoaded(function(){ 
      $container.masonry({ 
       itemSelector : '.post-wrap' 
      }); 
     }); 

    }; 

    Bricks(); 

});

注：还有更好的，写上面的代码更简洁的方式，但是这作为一个答案，眼下的问题。

使用Javascript函数

相关推荐