Question

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

我/我想要做的是在我的主页上显示一些类别。每个类别都可以“折叠”点击。到目前为止，崩溃部分工作正常但不是折叠图标的图像交换。

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

头标记中的js：

<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进行相应更改吗？

Answer 1

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

<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>";

由于'swapImg（this）'而无需ID，因此可以单独交换多个图像。

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

1 个答案: