我创建了一个web app。我已经尝试了我的最佳级别,以找出为什么在搜索项目时隐藏名为more
的div(您可以从评论和警报中看到我的努力),但我无法跟踪它。如果有人能指导我,我将感激不尽。感谢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="images/favicon.png" />
<script type="text/javascript">
var nexturl ="";
var lastid ="";
var param;
<!--Trace more-->
function myFunction() {
param = $('#search').val();
//alert("I am an alert box!");
if (param != "") {
$("#status").show();
//alert("Show ");
var u = 'https://graph.facebook.com/search/?callback=&limit=5&q='+param;
$("#data").empty(); //empty the data div
//alert("Wait for 5 sec?");
setTimeout(function(){
getResults(u)},
200);
//getResults(u);
//alert("When myFunction runs show more line 20");
$("#more").show();
}
$("#more").click(function () {
$("#status").show();
//alert("Show ");
$("#more").hide();
pageTracker._trackPageview('/?q=/more');
var u = nexturl;
getResults(u);
});
}
</script>
<title>Facebook Status Search - Search Facebook Status in Real Time</title>
<meta name="description" content="Facebook status search, search status facebook, facebook status real time, Fahad Uddin Facebook status search, Facebook update search">
<meta name="distribution" content="global">
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cuteTime.min.js"></script>
<script type="text/javascript" src="ofs.js"></script>
<script type="text/javascript" src="ga.js"></script>
<link rel="stylesheet" href="font/stylesheet.css" type="text/css" charset="utf-8" />
</head>
<body style="margin:0px;padding:0px;">
<div id="container">
<div id="header" style="height:39px; background-color:#3B5998; margin-bottom: 10px; ">
<div id="logo" style="display:inline;">
<h1 style="display:inline; font-family: 'klavika_boldbold_tf';color: #FFFFFF;padding-left:50px;padding-left: 50px;font-size:30px;" ><a style="color:#fff;" href="http://www.fbstatussearch.com">facebook status search</a></h1>
</div>
<div style="margin-bottom:10px;float:right;">
<form action="" method="get" id="searchform" onsubmit="return false;">
<input name="q" type="text" id="search" onClick="this.select();" size="32" maxlength="128" class="txt" style="padding: 0 5px;" >
<input type="button" id="hit" value="Search" onclick="myFunction();return false" class="btn">
</form>
</div>
</div>
<div id="data_container">
<div id="data">
<div id="status_container">
<div id="status"><img src="loader.gif" alt="loading facebook status search"/></div>
</div>
</div>
<div id="more" style="text-align:center;">More Posts <img src="DownTriangleIcon_8x8.png" alt="more status" /></div>
</div>
<div id="sidebar" style="float:right;">
<div style=" background-color: #fcf7da;
border-radius: 5px 5px 5px 5px;
color: #735005;
padding: 8px;margin-bottom:10px;" >
<h4>Share it with the World</h4>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fe772f550658645"></script>
<!-- AddThis Button END -->
</div>
<div style=" background-color: #FFEFC6;
border-radius: 5px 5px 5px 5px;
color: #735005;
padding: 8px;margin-bottom:10px;" >
<h4>How To Use</h4>
<p>Write down the tag to be searched in the top search area. For example,type in,<br>
<strong>Yahoo</strong><br>
and you will get the latest relevant Facebook updates of <strong>all the people around the world</strong> that have used the word <strong>"Yahoo"</strong>.</p>
</div>
<!-- <div style=" background-color: #FFE1C0;
border-radius: 5px 5px 5px 5px;
color: #735005;
padding: 8px;margin-bottom:10px;" >
<h4>Why Use it?</h4>
<p>Here is why you would <em>love it</em>.</p>
</div>
-->
<div style=" background-color: #EEEEEE;
border-radius: 5px 5px 5px 5px;
color: #735005;
padding: 8px;" >
<h4>Copyright</h4>
<p>Copyright 2013. All rights reserved. We are not linked with Facebook.<br>
Created by <a href="http://www.facebook.com/fahd92">Fahad Uddin</a>.
</p>
</div>
</div> <!--Sidebar Ends-->
<div id="adverise" width="336px;padding:0 auto; float:left;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8542523573222680";
/* FbStatusSearch1 */
google_ad_slot = "8229888765";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="footer">
<p style="font-size:12px;">Copyrights 2013.Created by <a href="http://www.facebook.com/fahd92">Fahad Uddin</a>. All Rights Reserved.</p>
</div> <!--Footer Ends-->
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-16080447-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<script type="text/javascript">
$(document).ready(function () {
$("#search").keyup(function(e){
$("#status").empty();
/*
var keyCode = e.keyCode || e.which;
if(keyCode == 13) {*/
myFunction();
//}
});
//alert("On Page load hide more Line 151 ");
$("#status").hide();
//$("#more").hide();
});
</script>
</body></html>
这是JS,
function getResults(u) {
//$("#status").show();
$("#data").empty(); // print that we are in
$.ajax({
dataType: "jsonp",
url: u,
success: function(res) { // take an object res
$("#data").empty();
$("#status").show(); // show status
//$("#more").show();
if (res.data.length) { // check length of res
// print if >0
nexturl = res.paging.next; // calculate next url
$.each(res.data, function(i,item){
if (item.id != lastid) {
lastid = item.id;
var html ="<div class=\"post\">";
html += "<div class=\"message\"><a href=\"http:\/\/www.facebook.com\/profile.php?id="+item.from.id+"\">"+item.from.name+"</a> ";
if (item.message) {
html += item.message+"<\/div>";
} else {
html += "<\/div>";
}
if (item.picture) {
html += "<div class=\"image\"><img src=\""+item.picture+"\"></div>";
} else {
html += "<div class=\"image\"><\/div>";
};
if (item.link) {
html += "<div class=\"link\"><a href=\""+item.link+"\">"+item.name+"</a></div>";
if (item.caption) {
html += "<div class=\"caption\">"+item.caption+"</div>";
};
if (item.description) {
html += "<div class=\"description\">"+item.description+"</div>";
};
};
html += "<div class=\"meta\">";
if (item.icon) {
html += "<span class=\"icon\"><img src=\""+item.icon+"\"></span> ";
};
var t = item.created_time;
var time = t.substring(0,19)+"\+00:00";
html += "<span class=\"time\">"+$.cuteTime({},time)+"<\/span> ";
html += " <\/div>";
html +="</div>";
$("#data").append(html) ;
}
});
$("#more").appendTo("#data");
$("#more").show();
$("#status").appendTo("#data");
} else {
$("#data").append("<h3 class=\"none\">No entries found. Please try another search.</h3>");
};
}
});
}
答案 0 :(得分:2)
你的问题是:
$("#more").appendTo("#data");
首先more
坐在data_container
,然后按此行将其移至数据:$("#more").appendTo("#data");
然后当他再来success
时删除more
此行与data
一起$("#data").empty();
以及当您想要再次执行时$("#more").appendTo("#data");
找不到。
我认为你应该改为:
$("#more").appendTo("#data_container");
或者在变量more
之前保存$("#data").empty();
,然后将变量附加到data
。