Javascript 改变'；img id'；与'；document.getElementById'；从自动生成的列表中选择时_Javascript_Php

Javascript 改变'；img id'；与'；document.getElementById'；从自动生成的列表中选择时

javascript php

Javascript 改变'；img id'；与'；document.getElementById'；从自动生成的列表中选择时,javascript,php,Javascript,Php,从自动生成列表中选择时更改图像id的解决方案此代码：为每个文件生成一个带有按钮的屏幕。函数chgpano： function chgpano() { ima = document.getElementById("tonto"); init(); } 更改分配给变量“ima”的img Id。“tonto”的内容需要反映选定的图像以下内容无法工作，但确实显示了意图： function chgpano() { img id="tonto" src= ('pano/'+ vari

从自动生成列表中选择时更改图像id的解决方案此代码：

为每个文件生成一个带有按钮的屏幕。函数chgpano：

function chgpano()
{
ima = document.getElementById("tonto");
init();
}

更改分配给变量“ima”的img Id。“tonto”的内容需要反映选定的图像

以下内容无法工作，但确实显示了意图：

  function chgpano()
{
    img id="tonto" src= ('pano/'+ variable with text from button selected)
ima = document.getElementById("tonto");
init();
}

我看到了一个类似的问题，但由于不清楚而被拒绝了

正如在评论中提到的那样，html中id的目的是为了一个元素。。因此，我将使用

class

或新的

数据标记

为了将php脚本也用于其他脚本/站点，我将扫描文件夹并将所有内容转换为

json

（包含png的所有路径的简单数组）

下面是一个使用javascript 1.7（现代html5浏览器）的示例

使用一个处理程序处理多个元素

scanForPNGs.php

echo json_decode(glob('pano/*.png'));

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
 img{width:100px;}
 img.IMA{opacity:0.3;}
</style>
<script>
var box;
function ajax(a,b,c){c=new XMLHttpRequest;c.open('GET',a);c.onload=b;c.send()};
function display(){
 box.innerHTML='<img src="'+JSON.parse(this.response).join('"><img src="')+'">';
}
function whatever(e){
 e.target.classList.toggle('IMA');// activate & deactivate
 //or
 //e.target.dataset['IMA']=e.target.dataset['IMA']=='ON'?'OFF':'ON';
}
window.onload=function(){
 box=document.getElementsByTagName('div')[0];
 box.addEventListener('click',whatever,false);
 ajax('scanForPNGs.php',display);
}
</script>
</head>
<body>
<div></div>
</body>
</html>


img{宽度：100px；}
img.IMA{不透明度：0.3；}
var盒；
函数ajax（a，b，c）{c=newxmlhttprequest；c.open（'GET'，a）；c.onload=b；c.send（）}；
函数显示（）{
innerHTML=''；
}
函数（e）{
e、 target.classList.toggle（'IMA'）；//激活和停用
//或
//e、 target.dataset['IMA']=e.target.dataset['IMA']=='ON'？'OFF'：'ON'；
}
window.onload=function（）{
box=document.getElementsByTagName（'div'）[0]；
box.addEventListener（'click'，无论如何，false）；
ajax（'scanForPNGs.php'，display）；
}

在

which

函数中，您可以向单击的元素添加任何属性或函数

在我的情况下，我只是改变不透明度

触发器是图像本身

我没有测试这段代码…一定要用chrome测试它

范例

试试这个：

// PHP can look like
$liA = '';
foreach(glob('pano/*.png') as $f){
  $path_parts = pathinfo($f);
  $liA .= "<li><a href='javascript:chgpano($f)'>{$path_parts['filename']}></a></li>";
}
echo $liA;

// JavaScript can look like + some goodies
var doc = document; // get in the habit of declaring variables
function E(e){
  return doc.getElementById(e);
}
var tonto = E('tonto');
function chgpano(f){
  tonto.src = f;
}

//PHP看起来像
$liA=''；
foreach（glob（'pano/*.png'）为$f）{
$path\u parts=pathinfo（$f）；
$liA.=“”；
}
echo$liA；
//JavaScript看起来像+一些好东西
var doc=文档；//养成声明变量的习惯
职能E（E）{
返回单据getElementById（e）；
}
var tonto=E（‘tonto’）；
函数chgpano（f）{
tonto.src=f；
}

我会使用外部JavaScript，将

标记放在正文的底部。或者，您可以将

标记放入

并运行

onload

谢谢各位。这修正了它：

<?php
            foreach(glob('pano/*.png') as $filename):$path_parts = pathinfo ($filename); $id_front = $path_parts['filename'];?>
                <li> <a onclick = "javascript:chgpano('<?php echo $id_front ?>')"><?php  echo $id_front, "\n";?></a><img id= <?php echo $id_front ?> src= <?php echo$filename ?> style="display:none"></li>
             <?php endforeach; unset( $filename);?>

我必须将变量定义移出

div，否则函数参数在定义变量之前就被填充了

id用于html中的一个元素。您应该使用该类或新标记“数据id”，例如。。。但无论如何。。。您的代码包含许多错误。。。如果你解释清楚你想做什么，我可以给你写一个简单的例子。那你为什么要把元素的标识改成ima呢？我试着投票赞成，这样这个问题就不会再被列为未回答的问题了。但我不能投票赞成我自己的回答。所以请其他人。

function chgpano(blah)
{
ima = document.getElementById(blah);
init();
}