Javascript 使不可见div在php循环中工作
我对php和这个网站都是新手,所以如果这听起来简单或者离题,请原谅我。我从一个mysql数据库表中获取了数据,该表有4列id[int]、名称[varchar]、图像[varchar]和价格[int],共12行。我只想在页面上显示数据-图像和按钮-这部分工作,当我按下按钮时,会出现一个显示框,显示更详细的名称和图像-这不起作用。如果您不明白我想说的话,请转到,看看当您在主页中按产品的“快速查看”时,它会打开一个显示更多详细信息的框。 以下是我的代码摘录:Javascript 使不可见div在php循环中工作,javascript,php,html,loops,mysqli,Javascript,Php,Html,Loops,Mysqli,我对php和这个网站都是新手,所以如果这听起来简单或者离题,请原谅我。我从一个mysql数据库表中获取了数据,该表有4列id[int]、名称[varchar]、图像[varchar]和价格[int],共12行。我只想在页面上显示数据-图像和按钮-这部分工作,当我按下按钮时,会出现一个显示框,显示更详细的名称和图像-这不起作用。如果您不明白我想说的话,请转到,看看当您在主页中按产品的“快速查看”时,它会打开一个显示更多详细信息的框。 以下是我的代码摘录: <div id="viewItem"
<div id="viewItem">
<div class="viewItemWrapper">
<div class="viewContent">
<div class="text-right" style="cursor:point;"><a href="javascript:void(0)" onclick="toggle_visibility('viewItem');"><strong>X</strong></a></div>
<div class="text-center"><img id="myTarget" src="" width="320" height="320" alt="Owl Image"></div>
<div id="product_name"><?php echo $namedeli ?></div>
<div id="product_price_container">KSh.<span id="product_price"><?php echo $pricedeli?></span></div>
<br>
<button class="btn btn-default" id="box_button">
Add to Cart
   
<span class="glyphicon glyphicon-shopping-cart"></span>
</button>
<div style="float:right; margin-right:25px;"><span style="font-size:1.2em;">Quantity:</span><span id="quantity">0</span></div>
</div>
</div>
</div>
<?php
$sqldeli = "SELECT * FROM deli";
$resultdeli = mysqli_query($dbc, $sqldeli);
if(mysqli_num_rows($resultdeli) == 12){
while($row = mysqli_fetch_assoc($resultdeli)) {
$namedeli = $row['name'];
$imagedeli = $row['image'];
$pricedeli = $row['price'];
echo "<div id=\"item\">\n";
echo "<a href=\"#\" target=\"_blank\"><img src=$imagedeli alt=\"Owl Image\" id=\"homeimage\"></a>\n";
echo "<a class=\"btn btn-default dropdown-toggle viewbuttons\" onclick='toggle_visibility(\"viewItem\");changeImage($imagedeli);'>View Item</a>\n";
echo "</div>";
}
}
else{
echo "Error Connecting";
}
?>
jQuery非常有用。看看这个 CSS 隐藏细节DIV的步骤
.hidden_data {display: none;}
用于更新行的php代码
jQuery代码
jquery代码必须位于主体的末尾,就在jquery库的后面。要加载jquery库,可以使用:
<script src='//code.jquery.com/jquery-1.11.3.min.js'></script>
<script>
$(document).ready(function(){
var img_a = 'http://www.linkingyourthinking.com/ezine/icon_owl.png';
var img_b = "http://fc06.deviantart.net/fs71/f/2012/220/8/7/owl_png_by_vechy-d5a9ob2.png";
$(document).on("click", ".active_data", function(event){
event.preventDefault();
var item_sel = $(this).parent(".item");
// restore image
$(".item img").attr("src", img_a);
$(".hidden_data").fadeOut(500).promise().done(function(){
$(item_sel).children(".hidden_data").fadeIn(500);
// set new image
$(item_sel).children("img").attr("src", img_b);
})
})
})
</script>
你的问题的意思应该是和/或不是谢谢你。我会做出改变我很高兴它能帮到你如果问题解决了,你可以把它标记为已解决。关于html代码,请注意:id值必须是唯一的,所以in-loop是错误的,您应该将其更新为id='item.$unique.\u-value',或者像我一样将id切换到类。
<script src='//code.jquery.com/jquery-1.11.3.min.js'></script>
<script>
$(document).ready(function(){
var img_a = 'http://www.linkingyourthinking.com/ezine/icon_owl.png';
var img_b = "http://fc06.deviantart.net/fs71/f/2012/220/8/7/owl_png_by_vechy-d5a9ob2.png";
$(document).on("click", ".active_data", function(event){
event.preventDefault();
var item_sel = $(this).parent(".item");
// restore image
$(".item img").attr("src", img_a);
$(".hidden_data").fadeOut(500).promise().done(function(){
$(item_sel).children(".hidden_data").fadeIn(500);
// set new image
$(item_sel).children("img").attr("src", img_b);
})
})
})
</script>