2

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

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

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

head标签中的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 以进行相应更改吗？

4

1 回答 1

0

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

<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 是什么。

于 2013-04-18T19:40:49.463 回答