Closed. This question needs to be more focused。它当前不接受答案。
想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
4年前关闭。
我有一个img,它是使用php从数据库添加到页面的。
我想基于'onclick'将其更改为数据库中的另一张img,这意味着我想更改之前创建的标签中的img。
这是我要更改的对象的代码
这是我要单击它会更改的img
这是我试图做的
我怎样才能做到这一点?
此时,变量
现在,您可以定义一个javascript函数,将img设置为all_images javascript数组中存在的另一个图像。也许像这样
现在您可以将其写入您的
如果您还想更改图像的ID,则可以更改
想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
4年前关闭。
我有一个img,它是使用php从数据库添加到页面的。
我想基于'onclick'将其更改为数据库中的另一张img,这意味着我想更改之前创建的标签中的img。
这是我要更改的对象的代码
<?php
include("dbAccess.php" );
$sql = "SELECT * FROM tbl_bigImg_202 where id=6"; //query string
$result = $connection -> query($sql);
if ($result -> num_rows > 0) {
// output data of each row
while($row = $result -> fetch_assoc()){
echo '<img id="mainPants" src="' . $row['img'] . '"/>';
}
}
?>
这是我要单击它会更改的img
<?php
$sql = "SELECT * FROM tbl_smallImg_202"; //query string
$result = $connection -> query($sql);
if ($result -> num_rows > 0) {
// output data of each row
while($row = $result -> fetch_assoc()){
if ($row['id'] == 5){
echo '<img id="pBlack" onclick="changeImage(this)" src="' . $row['img'] . '"/>';
}
if ($row['id'] == 7){
echo '<img id="pPink" onclick="changeImage(this)" src="' . $row['img'] . '"/>';
}
if ($row['id'] == 8){
echo '<img id="pRed" onclick="changeImage(this)" src="' . $row['img'] . '"/>';
}
}
}
?>
这是我试图做的
<script>
function changeImage(img) {
var newImg = document.getElementById('mainPants');
<?php
$sql = "SELECT * FROM tbl_bigImg_202"; //query string
$result = $connection -> query($sql);
if ($result -> num_rows > 0) {
// output data of each row
while($row = $result -> fetch_assoc()){
switch (img.id) {
case 'pBlack':
{
if($row['id'] == 5);
newImg.src= $row['img'];
}
break;
case 'pPink':
{
if($row['id'] == 7);
newImg.src= $row['img'];
}
break;
case 'pRed':
default:
{
if($row['id'] == 8);
newImg.src= $row['img'];
}
}
}
}
mysqli_close($connection);
?>
}
</script>
我怎样才能做到这一点?
最佳答案
哇,您不能立即从服务器上执行此操作。你需要
将所有可能的图像分配到某个javascript变量中,然后进行处理,或者
制作一个新的PHP脚本,该脚本将通过javascript在前端通过ajax
调用。
由于您的php脚本和问题并未使您看起来已经编码了太久了,因此我认为方法1对您而言会简单得多
<?php
include("dbAccess.php" );
$sql = "SELECT * FROM tbl_bigImg_202"; //query string
$result = $connection -> query($sql);
$all_images = array();
if ($result -> num_rows > 0) {
// assign the imag
while($row = $result -> fetch_assoc()){
array_push($all_images, $row['img'] );
}
}
...
此时,变量
$all_images
将具有数据库中所有图像的列表,现在您可以将该信息推送到前端,例如,像这样(不确定您的项目结构/框架,所以我想我会回声一下) ...
echo("<script type='text/javascript'>".
"var all_images=[".implode(',', $all_images)."];" //implode functino glues variables from an array into a string via a glue you define. we use comma for the javascript array
."</script>");
...
现在,您可以定义一个javascript函数,将img设置为all_images javascript数组中存在的另一个图像。也许像这样
var current_image_index_in_use=0; //global variable
function changeImage(dom_element){
//loop through image indices
current_image_index_in_use++;
if(current_image_index_in_use>=all_images.length){
current_image_index_in_use=0;
}
var image_to_use=all_images[current_image_index_in_use];
dom_element.src = img.src=image_to_use;
}
现在您可以将其写入您的
<img />
<img onclick="changeImage(this)" src="..some initial image.."/>
如果您还想更改图像的ID,则可以更改
all_images
,这样它不仅具有图像src信息,而且具有其相关的ID。我强烈建议您不要像在示例中那样执行if ($row['id'] == 5){$id="pPink" ...
。而是在数据库中创建一个新列,该列将存储此信息,并将其自动返回到二维数组,例如 while($row = $result -> fetch_assoc()){
array_push($all_images, array($row['img'], $row['my_dom_id']); );
}