我有一个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 <div style="color:#FFF; font-weight:bold; float:right;">/</div></div>
<div onClick="hide()" style="cursor:pointer; font-size:12px; color:#8080FF; float:right;"> 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);
}
答案 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)
对象。