0

如果 id 使用 javascript，我在更改具有类似类型的元素的 css 属性时遇到问题。

我正在通过一系列隐藏元素运行 php 循环。所以我有这样的id imgstat_1，imgstat_2等等。

我正在使用的代码是

foreach($img as $img1){?>
    <li>
       <a href="#" onclick="changeimgstat('<?php echo $counter;?>')">
         <img src="<?php echo $img1->vchEventImg?>" width="75" height="75" alt="" id="abc_<?php echo $img1->vchImgStatus?>" />
       </a>
    </li>
    <input type = "hidden" value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
    <?php $counter++;
}?>
<input type="hidden" value="" name="newimg" id="newimg">

和像这样的javascript

function changeimgstat(obj)
{
     var xyz = document.getElementById('newimg').value;
     alert(document.getElementById('abc_'+xyz));
     document.getElementById('abc_'+obj).style.border="3px solid red";
     var status = document.getElementById('imgstat_'+obj).value;
     document.getElementById('newimg').value = status;
}

所以有人可以建议我做错了什么

4

4 回答 4

0

最好的解决方案是为元素添加一个 css 类属性。并为班级编写样式。

在 onclick 函数中，您可以将类添加到元素

于 2013-03-07T04:44:53.993 回答
0

正如我发现您的代码中没有错误，但您之前定义$counter过foreach loop. 你img id应该是abc_<?php echo $counter?>而不是abc_<?php echo $img1->vchImgStatus?>你正在使用的javascript.

尝试：

CSS

.img3{border:3px solid red;}
.img{border:none;}

HTML 和 PHP

<?php
$counter=1;
foreach($img as $img1){?>
    <li>
       <a href="#" onclick="changeimgstat('<?php echo $counter;?>')">
         <img class="img" src="<?php echo $img1->vchEventImg?>" width="75" height="75" alt=""  id="abc_<?php echo $counter?>" />
       </a>
    </li>
    <input type="hidden" value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
    <?php $counter++;
}?>
<input type="hidden" value="" name="newimg" id="newimg">

脚本

<script>
function removeAllClass()
{
    var allimg=document.getElementsByClassName("img");
    for(var index=0;index<allimg.length;index++)
    {
        allimg[index].className = "img";
    }
}   

function changeimgstat(obj)
{
     removeAllClass();
     document.getElementById('abc_'+obj).className="img img3";
     var status = document.getElementById('imgstat_'+obj).value;
     document.getElementById('newimg').value = status;
}
</script>
于 2013-03-07T04:46:37.623 回答
0

看来你有：

<img ... id="abc_<?php echo $img1->vchImgStatus?>">

和

<input ... value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">

你确定这两个元素会有你期望的 id 吗？

于 2013-03-07T04:47:15.933 回答
0

尝试以下操作：

foreach($img as $img1){?>
    <li>
       <a href="#" onclick="changeimgstat('<?php echo $counter;?>')">
         <img src="<?php echo $img1->vchEventImg?>" width="75" height="75" alt="" id="abc_<?php echo $counter;?>" />
       </a>
    </li>
    <input type = "hidden" value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
    <?php $counter++;
}?>
<input type="hidden" value="" name="newimg" id="newimg">

Javascript：

function changeimgstat(obj)
{
     var xyz = document.getElementById('newimg').value;
     alert(document.getElementById('abc_'+xyz));
     document.getElementById('abc_'+obj).style.border="3px solid red";
     var status = document.getElementById('imgstat_'+obj).value;
     document.getElementById('newimg').value = status;
}

我更改了 id="abc_" 因为在 javascript 函数中，您传递的参数是计数器，所以应该是 id 值。

于 2013-03-07T04:47:46.690 回答