jQuery-我在做什么錯？
[英]JQuery - What Am I Doing Wrong?
問題描述
我正在使用Jquery Wookmark替代Masonry.js，但我根本無法使用它。 我在這里做錯了什么？
<head>
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<?php include("include/head.php"); ?> // CONTAINS JQUERY 1.9.1
<link rel="stylesheet" type="text/css" href="css/posts.css" />
<link rel="stylesheet" type="text/css" href="css/searches.css" />
<script type="text/javascript" src="scripts/jquery.wookmark.js"></script>
</head>
<div id="postsHolder">
<div class="post singlePost">
<div class="postInner">
<div class="postTop">
<div class="postTopRow"><strong>Title</strong></div>
</div>
<div class="postContentHolder postNoteText">
Post Information
</div>
<div class="postOptions"></div>
</div>
</div>
x20 (or however many php script specifies)
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#postsHolder div').wookmark();
});
</script>
看起來這是告訴您在github上執行此操作的方式，但是我不能讓他們在彼此之間保持巨大的差距。 我需要更改什么？
4 個解決方案
解決方案1
1 2013-10-25 11:22:10
首先包含jQuery文件
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
然后加
<script type="text/javascript" src="scripts/jquery.wookmark.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#postsHolder div').wookmark();
});
解決方案2
0 2013-10-25 11:24:02
包括Jquery並在head標簽內添加CSS
<html>
<style>
.singlePost{
float: left;
width: 210px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.wookmark.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#postsHolder div').wookmark();
});
</script>
</html>
解決方案3
0 2013-10-25 11:24:04
由於已經包含jQuery（如注釋中所述），因此您所需要做的就是將自定義腳本包裝在$( document ).ready()函數中 ：
<script type="text/javascript">
$(document).ready(function() {
$('#postsHolder div').wookmark();
});
</script>
在文檔“就緒”之前，無法安全地操縱頁面。 jQuery為您檢測到這種就緒狀態。
$( document ).ready()內包含的代碼僅在頁面Document Object Model（DOM）准備好執行JavaScript代碼后才能運行。
如果您的CSS聲明只是純文本，則不會執行任何操作。 CSS必須放置在文檔的<head>並且必須包裝在style元素中：
<head>
<style type="text/css">
.singlePost{
float: left;
width: 210px;
}
</style>
</head>
解決方案4
0 2013-10-25 11:31:31
您的腳本很重要。 並且當它執行時，postHolder div可能不存在。 替換為功能
<script>
$(function(){
$('#postsHolder div').wookmark();
}
</script>
編輯：精確選擇器並添加容器。 這對我有用，並且沒有float:left 。 查看容器屬性
$(function() {
// Call the layout function.
$('#postsHolder .post').wookmark({
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('body'), // the width of this element is used to calculate the number of columns, defaults to "window". For example $('myContentGrid'). Container should also have the CSS property "position: relative".
offset: 2, // Optional, the distance between grid items
itemWidth: 210 // Optional, the width of a grid item
});
});
我在這個jQuery鏈接中做錯了什么？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.