跟踪隐藏的div

时间:2013-03-13 06:47:57

标签: javascript

我创建了一个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>");
            }; 
        } 

    });
}

1 个答案:

答案 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