切换多个图像时，单击，但一次一个

Swapping multiple images when clicked but one at a time

本文关键字：一个 一次 单击 图像      更新时间：2023-09-26

这几天我一直在寻找解决这个问题的方法。

我想做的是在我的主页上显示一些类别。每个类别都可以点击"折叠"。到目前为止，折叠部分工作良好，但不是为折叠图标的图像交换。

下面的代码更改了图像并将其交换回来，但无论我单击哪一个，它们都只更改列出的第一个。

js in head标签:

<script type="text/JavaScript">
var q=0;
function swapImage(){
if(q==0){
document.getElementById("tcat_collapse").setAttribute('src','images/collapsecat.gif');
q++;
}
else{
document.getElementById("tcat_collapse").setAttribute('src','images/expandcat.gif');
q--;
}
}
</script>

我要交换的图像标签:

while ($query2->fetch()) {
echo "<tbody><tr><td class='category' colspan='5'>";
echo "<a style='"float: right'" href='"#'" onclick='"toggleItem('catcollapse')'">";
echo "<img class='collapsecat' src='images/collapsecat.gif' border='0' onclick='swapImage();' /></a>";

我知道它与getElementByID部分有关。

这个网站的大部分是用PHP完成的，正如你所看到的，它是在一个while循环中，所以我有几个使用这个折叠功能同时显示。我知道javascript看起来很丑，但正如我所说，它的工作，但只有1个ID。

那么我能做些什么来实现每个类别的单独折叠而不必单独编码每个类别呢?我可以传递一个php变量作为元素ID为这个脚本进行相应的更改吗?

找到解决方案了。效果非常好:

<script type="text/JavaScript">
var namesVec = new Array("collapsecat.gif", "expandcat.gif");
var root ='images/';
function swapImg(ima){
nr = ima.getAttribute('src').split('/');
nr = nr[nr.length-1]
if(nr==namesVec[0]){ima.setAttribute('src',root+namesVec[1]);}
else{ima.setAttribute('src',root+namesVec[0]);}
}
</script>

代码看起来也更好:)

while ($query2->fetch()) {
    echo "<tbody><tr><td class='tcat' colspan='5'>";
    echo "<a style='"float: right'" href='"#'" onclick='"toggleItem('collapseobj_forumbit_" . $catid . "')'">";
    echo "<img class='tcat_collapse' src='images/collapsecat.gif' border='0' onclick='swapImg(this)' /></a>";

允许单独交换多个图像，无论ID如何，由于'swapImg(this)'

相关文章：