改变具有相似id的元素的css属性

Changing css property of elements having similar kind of id's

本文关键字：元素 属性 css id 相似 改变      更新时间：2023-09-26

我有一个问题，而改变具有类似类型的元素的css属性，如果使用javascript。

我正在运行一个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;
}

所以谁能建议我做错了什么

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

试题:CSS 

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

<?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>

最好的解决方案是为元素添加css class属性。为类编写样式。

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

看来你有:

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

和

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

您确定这两个元素将具有您期望的id吗?

尝试以下操作:

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值也应该是一样的

相关文章：