无法向下滑动div tag

时间:2016-12-01 20:16:34

标签: javascript html ajax

我有一个ajax页面(search.js)附加到我的主页面和setinterval每2秒。在我的主页面中,我有div标签(class =" view"),它可以向下滑动并切断间隔。一切都工作正常,但我有问题,当我点击( onClick =" show()" )时,我所有的div标签向下滑动以收集。但我的目标是为每个div标签单击并向下滑动单个。我试图排除故障,但由于缺乏知识而无法正常工作。如果有人能帮助我,我将不胜感激。非常感谢。

 $allresponse = $_SESSION['allresponse'];
 $json = json_encode($allresponse);
 $db = json_decode($json,true);

 for( $i = 0; $i < count($db); $i++)
 {
    $data = $db[$i];
    ?>
    <div style="width:100%; height:100%; border-style:none; padding:5px;  border-color:rgba(0, 0, 0, 0.2); border-width:4px; font-size:14px; overflow: hidden; margin:0px 0px 5px 0px; ">

       <div style="float:left; margin:0px 5px 0px 0px; border:4px solid rgba(0, 0, 0, 0.2); border-radius:2px;">
       <a href=""><img src="<?php echo $data["companyIcon"]?>" width="49" height="47" style="border-radius:2px;"></a>  
       </div>

       <a href="#" style="color:#8080FF; font-weight:bold; text-decoration:none;"><?php echo $data["productName"]?></a>

       <div style="float:right; margin:0px 8px 0px 0px;">
          <?php
          echo $data["City"];
          echo "</br>";
          ?>
       </div>

       <div class="view" style="font-size:12px; overflow:hidden; text-overflow:ellipsis; border-style:solid; display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical; height:40px; border:2px solid rgba(0, 0, 0, 0.2); border-radius:2px; padding:0px 2px 2px 2px;">
          <?php
          echo $data["Description"];
          ?>
       </div>

       <div style="float:right; margin:0px 8px 0px 0px;">
          <div onClick="show()" style="cursor:pointer; font-size:12px; color:#8080FF; float:left;">Show&nbsp;<div style="color:#FFF; font-weight:bold; float:right;">/</div></div>
          <div onClick="hide()" style="cursor:pointer; font-size:12px; color:#8080FF; float:right;">&nbsp;Hide</div>
       </div>

    </div>
 <?php 
 }

search.js

 var Interc = null;

 function search_city()
 {

 var hr = new XMLHttpRequest();


 hr.onreadystatechange = function() {
   if(hr.readyState === 4 && hr.status === 200)
    {

    document.getElementById("citybox").innerHTML = hr.responseText;

    }
 };
 hr.open("GET", "searchcity.php?t=" + Math.random(),true);
 hr.send();
 }

 var Interc = setInterval(search_city,2000);



 var Interr = null;

 function search_radius()
 {

 var hr = new XMLHttpRequest();

 hr.onreadystatechange = function() 
 {
   if(hr.readyState === 4 && hr.status === 200)
    {

    document.getElementById("radiusbox").innerHTML = hr.responseText;

    }
 };
 hr.open("GET", "searchradius.php?t=" + Math.random(),true);
 hr.send();

 }

 var Interr = setInterval(search_radius,2000);


 var Interp = null;

 function search_product(){

 var hr = new XMLHttpRequest();

 hr.onreadystatechange = function() 
 {
   if(hr.readyState === 4 && hr.status === 200)
    {

    document.getElementById("productbox").innerHTML = hr.responseText;

    }
 };
 hr.open("GET", "searchproduct.php?t=" + Math.random(),true);
 hr.send();
 }

 Interp = setInterval(search_product,2000);


 function show() 
 {  
 clearInterval(Interc);
 clearInterval(Interr);
 clearInterval(Interp);

 var $divView = $('div.view');
 var innerHeight = $divView.removeClass('view').height();
 $divView.addClass('view');

 $('div.view').animate({height: (($divView.height() == 40)? innerHeight: "160px")}, 500);

 }

 function hide() 
 {
 $('div.view').animate({height:40},500);
 Interr = setInterval(search_radius,2000);
 Interc = setInterval(search_city,2000);
 Interp = setInterval(search_product,2000);
 }

1 个答案:

答案 0 :(得分:0)

您的show()$功能似乎不正确。

$divView中,奇怪的是,但在JavaScript中变量class="view"的第一个字符<div>是合法的(在PHP中是正常的)。您似乎从已设置的show()标记中删除了animate属性,然后在下一行转身并将其添加回来。据推测,您想知道标签不在时的高度,但我认为它不会重新布局,直到<div>函数完成后

尝试注释掉调用id="citybox"的行,看看大小是在瞬间发生而不是在动画时段发生。

PHP最初打印出城市的document.getElementById("citybox").innerHTML = hr.responseText;似乎没有<a>属性,但id="productbox"似乎期待一个。类似地,PHP插入您的产品名称的document.getElementById("productbox").innerHTML = hr.responseText;标记没有<div>属性,但class="view"似乎期望一个。

另外,如果设置了$.ajax(),每个数据库记录只有一个XMLHttpRequest标记?代码似乎只预测页面上的一个这样的标记。或者,您是否真的希望从数据库查询中获得单行JSON?

最后,我通常使用scala.collection.immutable.List而不是直接使用浏览器raw scala> List(1,2) ::: List(3,4,5) res0: List[Int] = List(1, 2, 3, 4, 5) 对象。